# Selection control and label

Places a [Checkbox](/components/checkbox.md), [Radio](/components/radio.md), or [Switch](/components/switch.md) next to its label and makes the label clickable. For text inputs, use [Control and label](/components/control-and-label.md).

```tsx
// demo.tsx
import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

export default function SelectionControlAndLabelDemo() {
  return (
    <SelectionControlAndLabel
      control={
        <Checkbox.Root defaultChecked>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      Email notifications
    </SelectionControlAndLabel>
  );
}
```

## Usage

```tsx
import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

<SelectionControlAndLabel
  control={
    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
  }
>
  Email notifications
</SelectionControlAndLabel>;
```

It renders a `<label>` around the control, so clicking the text toggles it. Disabling the control dims the label too.

## Long labels

Long labels wrap; the control stays aligned with the first line.

```tsx
// long-label.tsx
import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

export default function SelectionControlAndLabelLongLabel() {
  return (
    <SelectionControlAndLabel
      control={
        <Checkbox.Root>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      Send me a weekly summary of project activity, including comments, assignments, and upcoming
      deadlines.
    </SelectionControlAndLabel>
  );
}
```

## API

### `SelectionControlAndLabel`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `control` (required) | `ReactNode` | - | A Checkbox, Radio, or Switch. |
| `children` (required) | `ReactNode` | - | The label text. |

Renders `<label>`. Also accepts its HTML attributes and `ref`.