Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Label

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

Version 13.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/label - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
  </>
);

Props

Props page anchor

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

RequiredDot

RequiredDot page anchor

element

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

Type
string
Default
'REQUIRED_DOT'

i18nLabel

Type
string