Label | iTwinUI

Label components can be used to associate text with form inputs.

Usage

Label corresponds to an HTML <label> and can be linked to an Input by matching Label’s htmlFor with Input’s id for better accessibility, ensuring assistive technologies correctly identify their relationship.

import * as React from 'react';
import { Flex, Input, Label } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <Label htmlFor='text-input'>Name:</Label>
      <Input id='text-input' placeholder='Enter name' />
    </>
  );
};

Required

To make the form field required, you can pass the required prop. This also adds the * next to the label.

import * as React from 'react';
import { Input, Label } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Label htmlFor='text-input' required>
        Name:
      </Label>
      <Input id='text-input' placeholder='Enter name' />
    </div>
  );
};

Display style

There are two available display styles:

"block" (default): places the label and the other fields on separate lines without adding any extra spacing.
"inline": displays the label inline with other elements by adding a right margin to it.

import * as React from 'react';
import { InputGrid, Input, Label, LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <InputGrid>
        <Label displayStyle='block'>Block label</Label>
        <Input />
      </InputGrid>
      <InputGrid labelPlacement='inline'>
        <Label displayStyle='inline'>Inline label</Label>
        <Input />
      </InputGrid>
    </div>
  );
};

Props

Prop	Description	Default
displayStyle	Set the display style of the label. - 'block' - default, no extra spacing (label and input will be on separate lines) - 'inline' - label gets a right margin so it can be placed inline "block" \| "inline"	'block'
required	Set to true if the label's associated input is required. This adds an asterisk next to the label text. boolean
disabled	Adds disabled styling to a label. boolean	false
as	"symbol" \| "object" \| "label" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| ... 159 more ... \| FunctionComponent<...>