SearchField

Sökfält

Storybook

React Aria

Inmatningsfält anpassat för sökning.

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

Grundläggande användning

Fältet renderar en sökknapp som standard. Enter-tangenten fungerar alltid för att trigga onSubmit.

<SearchField placeholder='Sök efter frukter' onSubmit={handleSubmit} />

Utan knapp

För realtidsfiltrering eller när ett explicit submit-steg inte behövs kan knappen döljas med showButton={false}. Använd onChange för att reagera på varje tangenttryckning.

{/* Real-time filter */}
<SearchField placeholder='Filtrera efter namn' showButton={false} onChange={filterResults} />

{/* Keyboard submit only */}
<SearchField placeholder='Sök efter frukter' showButton={false} onSubmit={handleSubmit} />

Sök med extern knapp

När du behöver mer kontroll över knappens placering eller utseende — komponera en egen Button bredvid fältet.

const [query, setQuery] = React.useState('')

<SearchField
  placeholder='Sök efter frukter'
  showButton={false}
  onChange={setQuery}
/>
<Button onPress={() => handleSubmit(query)}>Sök</Button>

Kommande förändring i v18

Den inbyggda sökknappen kommer inte längre att visas som standard i v18. Beteendet med showButton={false} ovan är vad som blir standard.

Vill du förbereda dig redan nu? Använd showButton={false} och komponera en egen Button — se exemplet ovan. Migreringen är en enkel prop-förändring.

API

Name	Type	Default	Description
placeholder *	string	-	Placeholder text
showButton	boolean	true	Whether to render a built-in submit button. Future flag: pass showButton={false} to opt into the v18 default today. In v18 the button will no longer be shown by default — compose your own Button outside SearchField instead. This prop will be removed in v18. See https://github.com/migrationsverket/midas/issues/1109 @example // Opt into v18 behavior now: <SearchField placeholder="Sök" onSubmit={handleSubmit} /> <Button onPress={() => handleSubmit(value)}>Sök</Button>
buttonText	string	'Sök'	Text displayed on the built-in submit button. @deprecated since v17.9.0 — use your own Button instead. See showButton.
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)
validationBehavior	"native" | "aria"	'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.
type	"text" | "tel" | "url" | "email" | "search" | "password" | (string & {})	'search'	The type of input to render. See MDN.
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.
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the input value is invalid.
validate	((value: string) => true | ValidationError | null) | undefined	-	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.
autoFocus	boolean	-	Whether the element should receive focus on render.
value	string	-	The current value (controlled).
defaultValue	string	-	The default value (uncontrolled).
className	ClassNameOrFunction<SearchFieldRenderProps>	'react-aria-SearchField'	The CSS className for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<SearchFieldRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", SearchFieldRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	string | null	-	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.