Komponenter
Textfield
Textfield gir brukere muligheten til å skrive fritekst eller tall.
React
Trykk Enter for å redigere
const Preview = () => { return <Textfield label='Label' />; }; render(<Preview />)
Bruk
Eksempel
Med rader
React
Trykk Enter for å redigere
const WithRows = () => { return <Textfield label='Label' multiline rows={4} />; }; render(<WithRows />)
Med prefiks og suffiks
React
Trykk Enter for å redigere
const WithAffix = () => { return ( <Textfield prefix='NOK' suffix='pr. mnd' label='Hvor mange kroner koster det per måned?' /> ); }; render(<WithAffix />)
Med teller
React
Trykk Enter for å redigere
const WithCounter = () => { return ( <Textfield counter={10} label='Hvor mange kroner koster det per måned?' /> ); }; render(<WithCounter />)
HTML
Dette er en samensatt komponent, som bruker Field, Input eller Textarea og Label under panseret.
Siden denne komponenten bygges opp av flere komponenter, anbefaler vi å lese dokumentasjonen for de underliggende komponentene for å få en full oversikt over HTML-strukturen.
CSS variablar og data-attributter
Textfielder en samensatt komponent, med Field, Input eller Textarea og Label.
Her viser vi kun ds-input sine variabler og data-attributter.
| 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 |