Label

Labels describe the purpose of a form element in a UI

1
import { Field, Label } from '@cerberus/react'

Usage

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input id="first_name" placeholder="Type your first name" type="text" />
8
    </Field>
9
  )
10
}

Hidden

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelHiddenPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search" hidden>
7
        Search anything
8
      </Label>
9
      <Input id="global_search" placeholder="Search anything" type="text" />
10
    </Field>
11
  )
12
}

Optional

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelOptionalPreview() {
4
  return (
5
    <Field>
6
      <Label htmlFor="preferred">Preferred Name</Label>
7
      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
8
    </Field>
9
  )
10
}

Customizing

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label
7
        className={css({
8
          fontSize: '2rem',
9
          bgColor: 'black',
10
          color: 'yellow',
11
        })}
12
        htmlFor="global_search"
13
      >
14
        Killa Bees
15
      </Label>
16
      <input id="global_search" type="text" />
17
    </Field>
18
  )
19
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}

define function Field(props: PropsWithChildren<FieldProps>): ReactNode

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor: string
  hidden?: boolean
  size?: 'sm' | 'md'
}

define function Label(props: LabelProps): ReactNode

Props

The LabelProps component accepts the following props:

Name	Default	Description
htmlFor	null	The `name` attribute of the Input the Label is associated with.
hidden	false	Whether the Label content should be visually hidden.
size	'md'	The size of the Label.

1
import { Field, Label } from '@cerberus/react'

Usage

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input id="first_name" placeholder="Type your first name" type="text" />
8
    </Field>
9
  )
10
}

Hidden

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelHiddenPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search" hidden>
7
        Search anything
8
      </Label>
9
      <Input id="global_search" placeholder="Search anything" type="text" />
10
    </Field>
11
  )
12
}

Optional

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelOptionalPreview() {
4
  return (
5
    <Field>
6
      <Label htmlFor="preferred">Preferred Name</Label>
7
      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
8
    </Field>
9
  )
10
}

Customizing

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label
7
        className={css({
8
          fontSize: '2rem',
9
          bgColor: 'black',
10
          color: 'yellow',
11
        })}
12
        htmlFor="global_search"
13
      >
14
        Killa Bees
15
      </Label>
16
      <input id="global_search" type="text" />
17
    </Field>
18
  )
19
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}

define function Field(props: PropsWithChildren<FieldProps>): ReactNode

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor: string
  hidden?: boolean
  size?: 'sm' | 'md'
}

define function Label(props: LabelProps): ReactNode

Props

The LabelProps component accepts the following props:

Name	Default	Description
htmlFor	null	The `name` attribute of the Input the Label is associated with.
hidden	false	Whether the Label content should be visually hidden.
size	'md'	The size of the Label.

1
import { Field, Label } from '@cerberus/react'

Usage

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input id="first_name" placeholder="Type your first name" type="text" />
8
    </Field>
9
  )
10
}

Hidden

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelHiddenPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search" hidden>
7
        Search anything
8
      </Label>
9
      <Input id="global_search" placeholder="Search anything" type="text" />
10
    </Field>
11
  )
12
}

Optional

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelOptionalPreview() {
4
  return (
5
    <Field>
6
      <Label htmlFor="preferred">Preferred Name</Label>
7
      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
8
    </Field>
9
  )
10
}

Customizing

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label
7
        className={css({
8
          fontSize: '2rem',
9
          bgColor: 'black',
10
          color: 'yellow',
11
        })}
12
        htmlFor="global_search"
13
      >
14
        Killa Bees
15
      </Label>
16
      <input id="global_search" type="text" />
17
    </Field>
18
  )
19
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}

define function Field(props: PropsWithChildren<FieldProps>): ReactNode

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor: string
  hidden?: boolean
  size?: 'sm' | 'md'
}

define function Label(props: LabelProps): ReactNode

Props

The LabelProps component accepts the following props:

Name	Default	Description
htmlFor	null	The `name` attribute of the Input the Label is associated with.
hidden	false	Whether the Label content should be visually hidden.
size	'md'	The size of the Label.

1
import { Field, Label } from '@cerberus/react'

Usage

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input id="first_name" placeholder="Type your first name" type="text" />
8
    </Field>
9
  )
10
}

Hidden

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelHiddenPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search" hidden>
7
        Search anything
8
      </Label>
9
      <Input id="global_search" placeholder="Search anything" type="text" />
10
    </Field>
11
  )
12
}

Optional

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelOptionalPreview() {
4
  return (
5
    <Field>
6
      <Label htmlFor="preferred">Preferred Name</Label>
7
      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
8
    </Field>
9
  )
10
}

Customizing

1
import { Field, Label } from '@cerberus/react'
2

3
function LabelCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label
7
        className={css({
8
          fontSize: '2rem',
9
          bgColor: 'black',
10
          color: 'yellow',
11
        })}
12
        htmlFor="global_search"
13
      >
14
        Killa Bees
15
      </Label>
16
      <input id="global_search" type="text" />
17
    </Field>
18
  )
19
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}

define function Field(props: PropsWithChildren<FieldProps>): ReactNode

export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor: string
  hidden?: boolean
  size?: 'sm' | 'md'
}

define function Label(props: LabelProps): ReactNode

Props

The LabelProps component accepts the following props:

Name	Default	Description
htmlFor	null	The `name` attribute of the Input the Label is associated with.
hidden	false	Whether the Label content should be visually hidden.
size	'md'	The size of the Label.