Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

Label

Version 13.1.1GithubStorybook

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

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

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.