Skip to content
Home

FormLabel

Info
Demos
Properties

Import

import { FormLabel } from '@dnb/eufemia'

Description

The FormLabel component represents a caption for all sorts of HTML elements in a user interface. By default, the label is displayed vertically (above the element). Use vertical={false} or labelDirection="horizontal" for inline labels.

Relevant links

Colon character

DNB UX has chosen to not use colon on the end of form element labels. For consistency throughout our websites, please avoid using them.

Demos

Default form-label

<FormLabel forId="alone-1">Default vertical FormLabel</FormLabel>
<Checkbox id="alone-1" label="Checkbox" />

Horizontal form-label

<FormLabel forId="alone-2" vertical={false}>
  Horizontal FormLabel
</FormLabel>
<Checkbox id="alone-2" label="Checkbox" />

Form-label without a forId

Without forId (select me)
<FormLabel element="span">Without forId (select me)</FormLabel>
<Checkbox label="Checkbox" />

Linked label (pattern)

<form>
  <div>
    <div>
      <FormLabel forId="switch-1" text="Form Label (click me):" />
    </div>
    <div>
      <Switch id="switch-1" value="Value of switch" />
    </div>
  </div>
</form>