# Label

The Label component is a UI element that provides a textual description or identifier for a corresponding form element, such as an input field, checkbox, or radio button. It enhances accessibility and usability by clearly indicating the purpose of the associated form element, ensuring users understand what information is required or what action is to be taken.

## Overview

```tsx
import { Label } from 'welcome-ui/Label'

const Example = () => {
  return <Label>Default label</Label>
}

export default Example
```

## Examples

### Variants

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

```tsx
import { Label } from 'welcome-ui/Label'

const Example = () => {
  return (
    <div className="flex gap-xl flex-col">
      <Label variant="warning">Warning variant</Label>
      <Label variant="danger">Danger variant</Label>
      <Label variant="success">Success variant</Label>
    </div>
  )
}

export default Example
```

### Required

With `required` property.

```tsx
import { Label } from 'welcome-ui/Label'

const Example = () => {
  return <Label required>Default label</Label>
}

export default Example
```

### Disabled

Customize label for disabled elements.

```tsx
import { Label } from 'welcome-ui/Label'

const Example = () => {
  return (
    <div className="flex gap-xl flex-col">
      <Label disabled>Disabled label</Label>
      <Label disabled variant="warning">
        Disabled label
      </Label>
    </div>
  )
}

export default Example
```

### 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`).

```tsx
import * as React from 'react'

import { Checkbox } from 'welcome-ui/Checkbox'
import { Label } from 'welcome-ui/Label'
import { Link } from 'welcome-ui/Link'

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

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

  return (
    <div className="flex gap-sm items-center">
      <Checkbox checked={checked} id="example-1" name="labelExample" onChange={handleToggle} />
      <Label htmlFor="example-1" variant="danger">
        <div>
          <span>Danger variant with </span>
          <Link href="#">a link</Link>
          <span> and all of that jazz because of the box</span>
        </div>
      </Label>
    </div>
  )
}

export default Example
```

## Props

### Label

```tsx
interface LabelProps {
  disabled?: boolean
  required?: boolean
  variant?: 'danger' | 'success' | 'warning'
}
```