Komponenter
Select
Select lar brukeren velge ett alternativ fra en liste.
React
Unable to parse html
const Preview = () => { return ( <Field> <Label>Velg et fjell</Label> <Select defaultValue=''> <Select.Option value='' disabled> Velg et fjell … </Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> <Select.Option value='aconcagua'>Aconcagua</Select.Option> <Select.Option value='denali'>Denali</Select.Option> <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option> <Select.Option value='elbrus'>Elbrus</Select.Option> <Select.Option value='vinson'>Mount Vinson</Select.Option> <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option> <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option> </Select> </Field> ); }; render(<Preview />)
- readOnly
- Description
Defines if the select is readOnly @deprecated Use `aria-readonly` instead.
- Type
boolean- Default
false
- width
- Description
Defines the width of Select, where "auto" matches the content width.
- Type
"full" | "auto"- Default
full
| Name | Type | Default | Description |
|---|---|---|---|
| readOnly | boolean | false | Defines if the select is readOnly @deprecated Use `aria-readonly` instead. |
| width | "full" | "auto" | full | Defines the width of Select, where "auto" matches the content width. |
SelectOptgroup
- 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 |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
SelectOption
- 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 |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Bruk
Eksempel
Gruppering
Du kan bruke Select.Optgroup for å gruppere alternativer i kategorier, noe som gjør lange lister mer oversiktlige og enklere å navigere.
React
Unable to parse html
const WithOptgroup = () => { return ( <Field> <Label>Velg en park</Label> <Select> <Select.Optgroup label='Grünerløkka'> <Select.Option value='sofienbergparken'> Sofienbergparken </Select.Option> <Select.Option value='birkelunden'>Birkelunden</Select.Option> <Select.Option value='olafryesplass'>Olaf Ryes plass</Select.Option> </Select.Optgroup> <Select.Optgroup label='Sentrum'> <Select.Option value='slottsparken'>Slottsparken</Select.Option> <Select.Option value='studenterlunden'>Studenterlunden</Select.Option> </Select.Optgroup> <Select.Optgroup label='Gamle Oslo'> <Select.Option value='botsparken'>Botsparken</Select.Option> <Select.Option value='klosterenga'>Klosterenga park</Select.Option> </Select.Optgroup> </Select> </Field> ); }; render(<WithOptgroup />)
Disabled
React
Unable to parse html
const Disabled = () => { return ( <Field> <Label>Velg et fjell</Label> <Select disabled> <Select.Option value='blank'>Velg …</Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<Disabled />)
ReadOnly
<select> er alltid :read-only, og støtter ikke dette på samme måte som input-typer du kan skrive i. Hvis du setter aria-readonly på en <select>, sørger vi for at den oppfører seg som om den kun har lese-tilgang, ved å stoppe onKeyDown og onMouseDown. Brukeren vil fortsatt kunne fokusere på elementet.
React
Unable to parse html
const ReadOnly = () => { return ( <Field> <Label>Velg et fjell</Label> <Select aria-readonly value='everest'> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<ReadOnly />)
HTML
Legg klassenavnet ds-select på <select>.
Dersom du vil ha readonly på en select, må du selv stoppe onKeyDown og onMouseDown for å forhindre endring av tilstanden.
CSS variabler og data-attributter
Klassen ds-input kan bli brukt for å style Input og Textarea også.
| Navn | Verdi |
|---|---|
| --dsc-input-padding-block | var(--ds-size-2) |
| --dsc-input-padding-inline | var(--ds-size-3) |
| --dsc-input-padding | var(--dsc-input-padding-block) var(--dsc-input-padding-inline) |
| --dsc-input-size--toggle | var(--ds-size-6) |
| --dsc-input-size | var(--ds-size-12) |
| --dsc-input-background--readonly | var(--ds-color-neutral-surface-tinted) |
| --dsc-input-background | var(--ds-color-neutral-surface-default) |
| --dsc-input-border-color--readonly | var(--ds-color-neutral-border-subtle) |
| --dsc-input-border-color | var(--ds-color-neutral-border-default) |
| --dsc-input-border-style | solid |
| --dsc-input-border-width--toggle | max(var(--ds-border-width-default),calc(var(--ds-size-1)/2)) |
| --dsc-input-border-width | var(--ds-border-width-default) |
| --dsc-input-outline-color--hover | var(--ds-color-neutral-border-default) |
| --dsc-input-outline-color--toggle--hover | var(--dsc-input-accent-color) |
| --dsc-input-outline-width--hover | var(--ds-border-width-default) |
| --dsc-input-outline-style--hover | solid |
| --dsc-input-color--readonly | var(--ds-color-neutral-text-default) |
| --dsc-input-color | var(--ds-color-neutral-text-default) |
| --dsc-input-stroke-color | var(--ds-color-base-contrast-default) |
| --dsc-input-stroke-color--invalid | var(--ds-color-danger-base-contrast-default) |
| --dsc-input-stroke-width | 0.05em |
| --dsc-input-accent-color | var(--ds-color-base-default) |
| --dsc-input-accent-color--invalid | var(--ds-color-danger-text-subtle) |
| --dsc-input-line-height | var(--ds-line-height-md) |
| Navn | Verdi |
|---|---|
| data-width | auto |