Komponenter

Textfield

Textfield gir brukere muligheten til å skrive fritekst eller tall.

Oversikt Kode Tilgjengelighet

className
Description: Classname on the wrapper element `Field`
Type: string

style
Description: Style on the wrapper element `Field`
Type: CSSProperties
Default: undefined

label
Description: Label
Type: ReactNode

description
Description: Description
Type: ReactNode

prefix
Description: Prefix
Type: string

suffix
Description: Suffix
Type: string

error
Description: Error message for field
Type: ReactNode

counter
Description: Uses `Field.Counter` to display a character counter Pass a number to set a limit, or an object to configure the counter
Type: number | FieldCounterProps

aria-label
Description: Defines a string value that labels the current element. @see aria-labelledby.
Type: string

aria-labelledby
Description: Identifies the element (or elements) that labels the current element. @see aria-describedby.
Type: string

multiline
Description: Use to render a `Textarea` instead of `Input` for multiline support
Type: boolean

type
Description: Supported `input` types
Type: "number" | "hidden" | "color" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"
Default: 'text'

size
Description: Defines the width of `Input` in count of characters.
Type: number

Name	Type	Default	Description
className	`string`	-	Classname on the wrapper element `Field`
style	`CSSProperties`	undefined	Style on the wrapper element `Field`
label	`ReactNode`	-	Label
description	`ReactNode`	-	Description
prefix	`string`	-	Prefix
suffix	`string`	-	Suffix
error	`ReactNode`	-	Error message for field
counter	`number \| FieldCounterProps`	-	Uses `Field.Counter` to display a character counter Pass a number to set a limit, or an object to configure the counter
aria-label	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.
multiline	`boolean`	-	Use to render a `Textarea` instead of `Input` for multiline support
type	`"number" \| "hidden" \| "color" \| "date" \| "datetime-local" \| "email" \| "file" \| "month" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"`	'text'	Supported `input` types
size	`number`	-	Defines the width of `Input` in count of characters.

Bruk

import { Textfield } from "@digdir/designsystemet-react";
<Textfield label="Label" />;

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.

<!-- input --><div class="ds-field">  <label    class="ds-label"    data-weight="medium"    for="my-input"  >Label</label>  <div class="ds-field-affixes">    <input class="ds-input" type="text" id="my-input">  </div></div>
<!-- textarea --><div class="ds-field">  <label    class="ds-label"    data-weight="medium"    for="my-textarea"  >Label</label>  <div class="ds-field-affixes">    <textarea class="ds-input" type="text" id="my-textarea">  </div></div>

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
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)

Data-attributter
Navn	Verdi
data-width	auto

Rediger denne siden på github.com (åpnes i ny fane)