---
title: Form label
description: Use FormLabel to name an input, control, or form-related field.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.147Z
checksum: 9bb16d31b902bd8e462b8624448320d15451860d751de47a4905a17ea0554ae3
---

# Form label

## Import

```tsx
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}` for inline labels.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=44978-544)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/form-label)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/components/form-label)

### 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.


## Related components

Form label is part of the [Formatting and typography](/web/components/overview/#formatting) category. More components in this category:

- [Date format](/web/components/date-format/) – to show dates in the correct DNB format.
- [Heading](/web/components/heading/) – to create accessible page headings with the correct level.
- [List format](/web/components/list-format/) – to show lists of values in the correct DNB format.
- [Number format](/web/components/number-format/) – to show numbers in the correct DNB format.


## Demos

### Default form-label


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


### Horizontal form-label


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


### Form-label without a `forId`


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


### Linked label (pattern)


```tsx
render(<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>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "forId": {
      "doc": "The same unique `id` like the linked HTML element has.",
      "type": "string",
      "status": "optional"
    },
    "text": {
      "doc": "The `text` of the label. You can use `children` as well.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "srOnly": {
      "doc": "When `true`, the label will be invisible and only accessible for screen readers.",
      "type": "boolean",
      "status": "optional"
    },
    "vertical": {
      "doc": "Defaults to `true`. If set to `false`, the label will be displayed horizontally (inline).",
      "type": "boolean",
      "status": "optional"
    },
    "size": {
      "doc": "Define one of the following [heading sizes](/web/layout-and-typography/elements/heading/): `basis`, `medium` or `large`.",
      "type": [
        "\"basis\"",
        "\"medium\"",
        "\"large\""
      ],
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "If set to `true`, the label will behave as not interactive.",
      "type": "boolean",
      "status": "optional"
    },
    "element": {
      "doc": "Defines the HTML element used. Defaults to `label`.",
      "type": "React.Element",
      "status": "optional"
    },
    "ref": {
      "doc": "Attach a `React.Ref` to the inner label `element`.",
      "type": "React.Ref",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```