Components

Textfield

Textfield allows users to enter free text or numbers.

Overview Code Accessibility

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.

Usage

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

Examples

With rows

With prefix and suffix

With counter

HTML

This is a composite component, which uses Field, Input or Textarea and Label under the hood.

Since this component is built from multiple components, we recommend reading the documentation for the underlying components to get a full overview of the HTML structure.

<!-- 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 variables and data attributes

Textfield is a composite component, with Field, Input or Textarea and Label.

Here we only show ds-input's variables and data attributes.

CSS Variables
Name	Value
--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 Attributes
Name	Value
data-width	auto

Edit this page on github.com (opens in a new tab)