Komponenter
Search
Search lar brukere raskt finne relevant innhold på et nettsted eller i en applikasjon. Komponenten består av et søkefelt, med eller uten en søkeknapp.
HTML
Unable to parse html
const Preview = () => { return ( <Search> <Search.Input aria-label='Søk' /> <Search.Clear /> <Search.Button /> </Search> ); }; render(<Preview />)
Bruk
Bruk klassenavnet ds-search på et wrapper-element rundt <input>.
Vil du ha en tøm-knapp, legger du til en <button> med type="reset".
Legg til en tom placeholder på <input> dersom du har tøm-knapp.
Du kan endre variant på button for å tilpasse visningen. Alternativt kan du fjerne knappen for å bruke et søkefelt med ikon.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
| Navn | Verdi |
|---|---|
| --dsc-search-padding-inline | var(--ds-size-2) |
| --dsc-search-clear-padding | var(--ds-size-1) |
| --dsc-search-clear-size | var(--ds-size-9) |
| --dsc-search-clear-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E") |
| --dsc-search-magnifying-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E") |
| --dsc-search-magnifying-icon-size | var(--ds-size-7) |
| --dsc-button-size | var(--dsc-search-clear-size) |
Ingen relevante data-attributter funnet.
Eksempel
Med label
Dersom du vil ha label på søkefeltet, må du legge til label som du kobler sammen med Search.Input. I eksempelet har vi brukt field for å få oppkobling mellom label og Search.Input.
HTML
Unable to parse html
const WithLabel = () => { return ( <Field> <Label>Søk etter katter</Label> <Search> <Search.Input name='cat-search' /> <Search.Clear /> <Search.Button /> </Search> </Field> ); }; render(<WithLabel />)
<form>
HTML
Unable to parse html
const Form = () => { const [value, setValue] = useState<string>(); const [submittedValue, setSubmittedValue] = useState<string>(); return ( <> <form onSubmit={(e) => { // Prevent navigation from Storybook e.preventDefault(); setSubmittedValue(value); }} > <Search> <Search.Input aria-label='Søk' value={value} onChange={(e) => setValue(e.target.value)} /> <Search.Clear /> <Search.Button /> </Search> </form> <Paragraph data-size='md' style={{ marginTop: 'var(--ds-size-2)' }}> Submitted value: {submittedValue} </Paragraph> </> ); }; render(<Form />)
React
- variant
- Description
Specify which variant to use
- Type
"primary" | "secondary" | "tertiary"- Default
'primary'
- icon
- Description
Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
- Type
boolean- Default
false
- loading
- Description
Toggle loading state. Pass an element if you want to display a custom loader.
- Type
ReactNode- Default
false
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
- type
- Description
Specify the type of button. Unset when `asChild` is true
- Type
"button" | "submit" | "reset"- Default
'button'
- command
- Description
Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal"
- Type
string
- commandfor
- Description
Specifies the target element for "command". value is ID of target
- Type
string
- commandFor
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "tertiary" | 'primary' | Specify which variant to use |
| icon | boolean | false | Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon. |
| loading | ReactNode | false | Toggle loading state. Pass an element if you want to display a custom loader. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| type | "button" | "submit" | "reset" | 'button' | Specify the type of button. Unset when `asChild` is true |
| command | string | - | Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal" |
| commandfor | string | - | Specifies the target element for "command". value is ID of target |
| commandFor | string | - | - |
SearchClear
- command
- Description
Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal"
- Type
string
- commandfor
- Description
Specifies the target element for "command". value is ID of target
- Type
string
- commandFor
- Type
string
- type
- Description
Specify the type of button. Unset when `asChild` is true
- Type
"submit" | "reset" | "button"- Default
'button'
- icon
- Description
Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
- Type
boolean- Default
false
- loading
- Description
Toggle loading state. Pass an element if you want to display a custom loader.
- Type
ReactNode- Default
false
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| command | string | - | Native invoker commands. Specifies actions to perform on an element specified by commandfor. Polyfilled by designsystemet-web and includes a custom --show-non-modal command. "show-modal", "close", "request-close", "show-popover", "hide-popover", "toggle-popover", "--show-non-modal" |
| commandfor | string | - | Specifies the target element for "command". value is ID of target |
| commandFor | string | - | - |
| type | "submit" | "reset" | "button" | 'button' | Specify the type of button. Unset when `asChild` is true |
| icon | boolean | false | Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon. |
| loading | ReactNode | false | Toggle loading state. Pass an element if you want to display a custom loader. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |