Components

Label

Label functions as a clear and accessible text label that tells the user what an associated form element is about.

HTML

HTMLReact

Press Enter to start editing

Unable to parse html

const Preview = () => {
  return <Label>Fødselsnummer (11 sifre)</Label>;
};

render(<Preview />)

Usage

Use the class name ds-label to style an HTML <label> element. Use data-weight to set the font weight.

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

No relevant css variables found.

Data Attributes
Name	Value
data-weight	semibold, regular

Story not found: WeightsEn

import { Label } from "@digdir/designsystemet-react";
<Label>Social Security Number (11 digits)</Label>;

weight
Description: Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
Type: "regular" | "medium" | "semibold"
Default: medium

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

Name	Type	Default	Description
weight	`"regular" \| "medium" \| "semibold"`	medium	Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.