SearchField

Sökfält

Storybook

React Aria

Inmatningsfält anpassat för sökning.

import { SearchField } from '@midas-ds/components'

<SearchField placeholder='Sök efter frukter' />

API

Name	Type	Default	Description
placeholder *	string	-	Placeholder text
buttonText	string	'Sök'	Text displayed on the 'search' button
errorMessage	string	-	A custom error message if using the isInvalid prop.
errorPosition	"top" | "bottom"	top
size	Size	large	Component size (large: height 48px, medium: height 40px)
children	ReactNode | ((item: T) => ReactNode)	-	The contents of the collection.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
isDisabled	boolean	-	Whether the input is disabled.
style	StyleOrFunction<DisclosureRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
autoFocus	boolean	-	Whether the element should receive focus on render.
enterKeyHint	"search" | "enter" | "done" | "go" | "next" | "previous" | "send"	-	An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
type	"search" | "text" | "url" | "tel" | "email" | "password" | (string & {})	'search'	The type of input to render. See MDN.
value	DateValue	-	The current value (controlled).
defaultValue	DateValue	-	The default value (uncontrolled).
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isInvalid	boolean	-	Whether the input value is invalid.
validationBehavior	"aria" | "native"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validate	(value: boolean) => true | ValidationError	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.