Form.Label

Edit this page Leave feedback

Provide a label for a form control. Form.Label uses a FormGroupContext (provided by Form.Group) to ensure that it has an htmlFor attribute matching the Form.Control according to WCAG guidelines.

Basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>

<Form.Group>
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>

Inline usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group className="d-flex align-items-center">
  <Form.Label isInline>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>

<Form.Group className="d-flex align-items-center">
  <Form.Label isInline>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>

Usage with grouped control

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group className="d-flex align-items-center">
  <Form.Label isInline>What kind of cats?</Form.Label>
  <Form.RadioSet name="color-three" defaultValue="green" isInline>
    <Form.Radio value="red">Red</Form.Radio>
    <Form.Radio value="green">Green</Form.Radio>
    <Form.Radio value="blue">Blue</Form.Radio>
    <Form.Radio value="cyan" disabled>Cyan</Form.Radio>
  </Form.RadioSet>
</Form.Group>

<Form.Group className="d-flex align-items-center">
  <Form.Label isInline>What kind of cats?</Form.Label>
  <Form.RadioSet name="color-three" defaultValue="green" isInline>
    <Form.Radio value="red">Red</Form.Radio>
    <Form.Radio value="green">Green</Form.Radio>
    <Form.Radio value="blue">Blue</Form.Radio>
    <Form.Radio value="cyan" disabled>Cyan</Form.Radio>
  </Form.RadioSet>
</Form.Group>

Sizes

Show editable code example

Any Paragon component or export may be added to the code example.

<>
<Form.Group size="sm">
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>
<Form.Group size="lg">
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>
</>

<>
<Form.Group size="sm">
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>
<Form.Group size="lg">
  <Form.Label>What kind of cats?</Form.Label>
  <Form.Control />
</Form.Group>
</>

See Form.Control for floating labels

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Control floatingLabel="What kind of cats?" />
</Form.Group>

<Form.Group>
  <Form.Control floatingLabel="What kind of cats?" />
</Form.Group>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

FormLabel Props API

children React.ReactNode Required
Specifies contents of the component.
isInline boolean
Specifies whether the component should be displayed with inline styling.
Defaultfalse
className string
Specifies an additional className to add to the base element.

Usage Insights#

FormLabel

	Project Name	Paragon Version	Instance Count
	frontend-app-authn	23.14.0	1
	frontend-app-communications	23.12.2	1
	frontend-app-communications	23.12.2	3
	frontend-app-communications	23.12.2	1
	frontend-app-course-authoring	23.15.1	3

Edit this page Leave feedback

Contents

Basic usage
Inline usage
Usage with grouped control
Sizes
See Form.Control for floating labels
Theme Variables
Props API
Usage Insights