Label

Import

import { Label } from '@windmill/react-ui'

Base

The default base Label doesn't need any special prop and should always enclose all elements that it describes.

<Label>
  <span>Name</span>
  <Input className="mt-1" />
</Label>

Check/radio

The check and radio props apply the respective styles to the input, making them look beautiful. They are interchangeable, so you could use only radio or only check, but I would recommend that you use the one that better describes its use.

<Label radio>
  <Input type="radio" />
  <span className="ml-2">Radio label</span>
</Label>
<Label check>
  <Input type="checkbox" />
  <span className="ml-2">Checkbox label</span>
</Label>

Disabled

The disabled prop applies disabled styles to the label. You still need to handle the disabled state individually for the inputs. See example below.

<Label radio disabled>
  <Input type="radio" />
  <span className="ml-2">Disabled radio label</span>
</Label>
<Label check disabled>
  <Input type="checkbox" />
  <span className="ml-2">Disabled checkbox label</span>
</Label>
<Label disabled>
  <span>Name</span>
  <Input className="mt-1" />
</Label>

Props overview

Customizing

See Customization to learn how to change defaultTheme styles.