Label

Default #

label DOM, use on Field.

<Label>Default label</Label>
Copy

Required #

With required property.

<Label required>Required label</Label>
Copy

Variants #

error, warning, info or success variant add specific badge, you can add a custom one as well.

<Label variant="warning">Warning variant</Label>
<Label variant="error">Error variant</Label>
<Label variant="info">Info variant</Label>
<Label variant="success">Success variant</Label>
<Label icon="🐶">Custom icon</Label>
Copy

More content #

Checkboxes and radio buttons are normally nested inside labels. If you do this, make sure there is only one other child (in this example, a div).

function () {
  const [checked, setChecked] = React.useState(false)

  const handleToggle = () => setChecked(!checked)

  return (
    <Label variant="error">
      <Checkbox name="labelExample" checked={checked} onChange={handleToggle} />
      <div>
        <span>Error variant with </span>
        <Link href="#">a link</Link>
        <span> and all of that jazz because of the fox</span>
      </div>
    </Label>
  )
}
Copy

Disabled #

Customize label for disabled elements.

<Label disabled>Disabled label</Label>
<Label disabled disabledIcon="🔒">
  Custom icon disabled label
</Label>
<Label disabled disabledIcon="🔒" variant="warning">
  Disabled custom icon warning label
</Label>
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #