Komponenter
Input
Input er et skjemaelement for å samle inn brukerdata. Det tilbyr grunnleggende funksjonalitet og er ideell når du trenger full kontroll over komponentens oppsett og validering, noe som gjør den ideell for bygging av spesialtilpassede elementer.
React
const Preview = () => { return <Input aria-label='input' />; }; render(<Preview />)
- type
- Description
Supported `input` types
- Type
"number" | "hidden" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "search" | "tel" | "text" | "time" | "url" | "week"- Default
text
- size
- Description
Defines the width of `Input` in count of characters.
- Type
number
- disabled
- Description
Disables element @note Avoid using if possible for accessibility purposes
- Type
boolean
- readOnly
- Description
Toggle `readOnly`
- Type
boolean
- role
- Description
Set role, i.e. `switch` when `checkbox` or `radio`
- Type
AriaRole
| Name | Type | Default | Description |
|---|---|---|---|
| type | "number" | "hidden" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "search" | "tel" | "text" | "time" | "url" | "week" | text | Supported `input` types |
| size | number | - | Defines the width of `Input` in count of characters. |
| disabled | boolean | - | Disables element @note Avoid using if possible for accessibility purposes |
| readOnly | boolean | - | Toggle `readOnly` |
| role | AriaRole | - | Set role, i.e. `switch` when `checkbox` or `radio` |
Bruk
Input er er styla native <input>-element, så dokumentasjonen er lite utfylt.
Du kan bruke denne komponenten for å style de fleste type-attributtene til <input>.
Du kan lese om The HTML Input element på MDN (mozilla.com).
Eksempel
Med label
React
const WithLabel = () => { return ( <Field> <Label>Fødselsnummer</Label> <Input /> </Field> ); }; render(<WithLabel />)
Med feil
React
const WithError = () => { return ( <Field> <Label>Fødselsnummer</Label> <Input aria-invalid /> </Field> ); }; render(<WithError />)
Disabled
React
const Disabled = () => { return ( <Field> <Label>Fødselsnummer</Label> <Input disabled value='12345678901' /> </Field> ); }; render(<Disabled />)
ReadOnly
React
const ReadOnly = () => { return ( <Field> <Label>Fødselsnummer</Label> <Input readOnly value='12345678901' /> </Field> ); }; render(<ReadOnly />)
HTML
Legg klassenavnet på <input>-elementet for å få designet fra designsystemet.
CSS variabler og data-attributter
Klassen ds-input kan bli brukt for å style Select og Textarea også.
| Navn | Verdi |
|---|---|
| --dsc-input-padding | var(--ds-size-2) var(--ds-size-3) |
| --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) |
| Navn | Verdi |
|---|---|
| data-width | auto |