# Input Label

> A label, required mark and helper text around any field you pass as children.

Source: /docs/components/input-label

```tsx
import { InputLabel } from '@aksornproject/aksara-ui'
```

## Label a field

`InputLabel` renders a `<label>`, then its children, then `helperText`, in a column. It does not touch the child. You link the label with `htmlFor` and the child's `id`, set native `required` on the child, and point `aria-describedby` at the helper text. For a new text field, [`TextInput`](/docs/components/input) does that wiring for you.

```tsx
import { Input, InputLabel } from '@aksornproject/aksara-ui'

export default function InputLabelBasic() {
  return (
    <div className="w-full max-w-spacing-320">
      <InputLabel
        label="Classroom name"
        htmlFor="classroom-name"
        required
        helperText={
          <span id="classroom-name-help">Students see this name.</span>
        }
      >
        <Input
          id="classroom-name"
          name="classroomName"
          required
          aria-describedby="classroom-name-help"
          placeholder="M.4/2 Science"
        />
      </InputLabel>
    </div>
  )
}
```

## Any child

The child can be an `Input`, a native `<textarea>`, a `<select>` or anything else. `helperText` renders in a `div`, so it can hold block content.

```tsx
import { InputLabel } from '@aksornproject/aksara-ui'

export default function InputLabelNative() {
  return (
    <div className="flex w-full max-w-spacing-320 flex-col gap-spacing-16">
      <InputLabel label="Subject" htmlFor="subject">
        <select
          id="subject"
          className="h-size-size-44 rounded-radius-radius-10 bg-color-background-surface px-spacing-14 text-color-text-primary inset-ring-(length:--border-border-1) inset-ring-color-border"
        >
          <option>Thai</option>
          <option>English</option>
          <option>Mathematics</option>
        </select>
      </InputLabel>
      <InputLabel label="Notes for the teacher" htmlFor="notes">
        <textarea
          id="notes"
          rows={3}
          className="rounded-radius-radius-10 bg-color-background-surface px-spacing-14 py-spacing-10 text-color-text-primary inset-ring-(length:--border-border-1) inset-ring-color-border"
        />
      </InputLabel>
    </div>
  )
}
```

## Required mark and errors

`required` draws `requiredMark` after the label, `*` by default. The mark is part of the label text, so screen readers read it with the name. `requiredMarkClassName` styles it. `destructive` colours the helper text with the error colour. `helperIcon` renders at the end of the label, after the mark.

```tsx
import { Input, InputLabel, typography } from '@aksornproject/aksara-ui'

export default function InputLabelDestructive() {
  return (
    <div className="w-full max-w-spacing-320">
      <InputLabel
        label="Type DELETE to confirm"
        htmlFor="confirm-delete"
        required
        requiredMark="(required)"
        requiredMarkClassName={typography('label-regular')}
        destructive
        helperText={
          <span id="confirm-delete-help">The text does not match.</span>
        }
      >
        <Input
          id="confirm-delete"
          status="error"
          defaultValue="delet"
          aria-describedby="confirm-delete-help"
        />
      </InputLabel>
    </div>
  )
}
```

## Accessibility

- The label names the field only through `htmlFor` and a matching `id` on the child.
- `required` is visual. Set native `required` on the child yourself.
- The helper text has no id of its own. Give its content an id and list it in the child's `aria-describedby`.
- The required mark is part of the accessible name, so screen readers read "Name \*". `TextInput` draws an `aria-hidden` star instead.

## API

### InputLabel

`className` styles the `<label>`. `wrapperClassName`, `ref` and the other HTML attributes go to the outer `div`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `required` | `boolean` |  | Draws `requiredMark` after the label. It does not mark the child required. |
| `label` | `ReactNode` |  | The text of the `<label>`. |
| `helperText` | `ReactNode` |  | Content under the child, in a `div`. Link it to the field with `aria-describedby` yourself. |
| `htmlFor` | `string` |  | The id of the field the label names. |
| `className` | `string` |  | Classes for the `<label>`, merged last. |
| `destructive` | `boolean` |  | Colours `helperText` with the error text colour. |
| `requiredMark` | `ReactNode` | `'*'` | The mark drawn after the label when `required` is set. |
| `requiredMarkClassName` | `string` |  | Classes for the required mark, merged last. |
| `wrapperClassName` | `string` |  | Classes for the outer `div`, merged last. |
| `helperTextClassName` | `string` |  | Classes for the helper text, merged last. |
| `helperIcon` | `ReactNode` |  | Content at the end of the `<label>`, such as a help icon. |