Skip to contentSkip to navigationSkip to topbar
Figma
Star

Label

A Label is text that provides a visible and accessible name to a form element.

Version 13.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/label - or - yarn add @twilio-paste/core
import {Input} from '@twilio-paste/core/input';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';

const Component = () => (
  <>
    <Label htmlFor="foo" required>
      foo
    </Label>
    <Input aria-describedby="foo_text" id="foo" name="foo" type="text" placeholder="foo" onChange={FOO} required />
    <HelpText id="foo_text">Enter some text.</HelpText>
  </>
);

Label

Label page anchor

as

Type
"label" | "div" | "legend"

disabled

Shows the input is disabled.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'LABEL'

i18nRequiredLabel

Label text for the required dot.

Type
string

marginBottom

Optionally remove Label's bottom margin.

Type
"space0"

required

Shows the input is required.

Type
boolean

variant

Type
LabelVariants

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'REQUIRED_DOT'

i18nLabel

Type
string