Hopp til hovedinnhold

Komponenter

Textfield

Textfield gir brukere muligheten til å skrive fritekst eller tall.

Bruk

Eksempel

Med rader

Med prefiks og suffiks

Med teller

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.

CSS-variabler
NavnVerdi
--dsc-input-paddingvar(--ds-size-2) var(--ds-size-3)
--dsc-input-size--togglevar(--ds-size-6)
--dsc-input-sizevar(--ds-size-12)
--dsc-input-background--readonlyvar(--ds-color-neutral-surface-tinted)
--dsc-input-backgroundvar(--ds-color-neutral-surface-default)
--dsc-input-border-color--readonlyvar(--ds-color-neutral-border-subtle)
--dsc-input-border-colorvar(--ds-color-neutral-border-default)
--dsc-input-border-stylesolid
--dsc-input-border-width--togglemax(var(--ds-border-width-default),calc(var(--ds-size-1)/2))
--dsc-input-border-widthvar(--ds-border-width-default)
--dsc-input-outline-color--hovervar(--ds-color-neutral-border-default)
--dsc-input-outline-color--toggle--hovervar(--dsc-input-accent-color)
--dsc-input-outline-width--hovervar(--ds-border-width-default)
--dsc-input-outline-style--hoversolid
--dsc-input-color--readonlyvar(--ds-color-neutral-text-default)
--dsc-input-colorvar(--ds-color-neutral-text-default)
--dsc-input-stroke-colorvar(--ds-color-base-contrast-default)
--dsc-input-stroke-color--invalidvar(--ds-color-danger-base-contrast-default)
--dsc-input-stroke-width0.05em
--dsc-input-accent-colorvar(--ds-color-base-default)
--dsc-input-accent-color--invalidvar(--ds-color-danger-text-subtle)
Data-attributter
NavnVerdi
data-widthauto
Rediger denne siden på github.com (åpnes i ny fane)