Label

Unable to parse html

const PreviewEn = () => {
  return <Label>National identity number (11 digits)</Label>;
};

render(<PreviewEn />)

Label is a typography component used to describe the content of form fields that the user needs to complete or interact with. Use it to provide short, precise, and understandable information about what a field contains or what the user is expected to do.

Example

Weights

Label uses semibold font-weight by default. This provides a balanced and clear appearance in most forms. Font weight should always be used with a clear purpose and contribute to a meaningful visual hierarchy.

When Label is used within Radio or Checkbox, the font weight is automatically reduced. This creates a natural hierarchy between the Label and any legend text in the associated Fieldset.

Unable to parse html

const Weights = () => {
  return (
    <div style={{ display: 'grid', gap: 'var(--ds-size-8)' }}>
      <Field>
        <Label>Label for text input</Label>
        <Input type='text' />
      </Field>
      <Field>
        <Label>Label for checkbox input</Label>
        <Input type='checkbox' />
      </Field>
    </div>
  );
};

render(<Weights />)

Guidelines

Label must be clearly connected to the associated field so that both visual users and users of assistive technologies understand the relationship.

If the field requires a specific format or limitations, this can be supplemented with a description (description) underneath rather than making the label unnecessarily long.

Unable to parse html

const TextFieldLabelEn = () => {
  return (
    <Textfield
      label='Street address'
      description='Example: Sunflower Road 44'
    />
  );
};

render(<TextFieldLabelEn />)

Text

Text in label should be simple, consistent, and easy to understand. Write in plain language so that all users immediately know what to enter or select. Avoid abbreviations and internal terminology unless the target audience is already familiar with them.