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

className string
Specifies class name to append to the base element.
children node Required
Specifies contents of the component.
isInline bool
Specifies whether the component should be displayed with inline styling.
Defaultfalse

Usage Insights#

FormLabel

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	3
	frontend-app-learner-dashboard	22.9.0	2
	prospectus	20.46.2	7

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