# Control and label

Labels a text control, such as [Input](/components/input.md) or [Text area](/components/text-area.md), with an optional description and error. For checkboxes, radios, and switches, use [Selection control and label](/components/selection-control-and-label.md).

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

export default function ControlAndLabelDemo() {
  return (
    <ControlAndLabel label="Display name" description="Shown to other workspace members.">
      <Input name="displayName" autoComplete="name" defaultValue="Alex Morgan" />
    </ControlAndLabel>
  );
}
```

## Usage

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

<ControlAndLabel label="Display name" description="Shown to other workspace members.">
  <Input name="displayName" />
</ControlAndLabel>;
```

ControlAndLabel is shorthand for these [Field](/components/field.md) parts. Use Field directly for a different order or one message per validation rule.

```tsx
<Field.Root>
  <Field.Label>Display name</Field.Label>
  <Input name="displayName" />
  <Field.Description>Shown to other workspace members.</Field.Description>
  <Field.Error />
</Field.Root>
```

## Error

`error` appears when the control fails native validation, such as `required` or `type="email"`. Here, validation runs when focus leaves the field: focus it, then press Tab.

```tsx
// error.tsx
import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

export default function ControlAndLabelError() {
  return (
    <ControlAndLabel label="Email" error="Enter a valid email address." validationMode="onBlur">
      <Input type="email" name="email" defaultValue="alex@" />
    </ControlAndLabel>
  );
}
```

## Disabled

`disabled` disables the label, description, and control together.

```tsx
// disabled.tsx
import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

export default function ControlAndLabelDisabled() {
  return (
    <ControlAndLabel
      label="Workspace ID"
      description="Assigned when the workspace is created."
      disabled
    >
      <Input name="workspaceId" defaultValue="workspace-2048" />
    </ControlAndLabel>
  );
}
```

## API

### `ControlAndLabel`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` | - | Visible label, associated with the control. |
| `children` (required) | `ReactNode` | - | The control, such as `Input` or `TextArea`. |
| `description` | `ReactNode` | - | Help text below the control. |
| `error` | `ReactNode` | - | Message shown when the control fails native validation. |

Also accepts Base UI [`Field.Root`](https://base-ui.com/react/components/field.md) props.