# Label

> A form label with required and optional indicators.

Category: Forms · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/label

Label names a form control. In most forms, use FormField, which renders the label and wires up ids, descriptions and errors for you. Use Label directly for custom controls or layouts that FormField does not cover.

## Import

```tsx
import { Label } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Input, Label, Stack } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Stack gap={2} style={{ width: 280 }}>
      <Label htmlFor="docs-label-basic">Job title</Label>
      <Input id="docs-label-basic" defaultValue="Head of Legal" />
    </Stack>
  );
}
```

### Required and optional

```tsx
import { Label, Stack } from '@bindshq/stance-react';

export function RequiredOptional() {
  return (
    <Stack gap={3}>
      <Label required>Work email</Label>
      <Label optionalText="Optional">Mobile number</Label>
    </Stack>
  );
}
```

### Sizes and disabled

```tsx
import { Label, Stack } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <Stack gap={3}>
      <Label>Medium label</Label>
      <Label size="sm">Small label</Label>
      <Label disabled>Disabled label</Label>
    </Stack>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label | `htmlFor` | `string` | None | Id of the labelled control. |
| Label | `required` | `boolean` | None | Shows * and announces “required”. |
| Label | `optionalText` | `ReactNode` | None | Marker for optional fields. |
| Label | `disabled` | `boolean` | None | Disabled styling. |
| Label | `size` | `'sm' \| 'md'` | `'md'` | Text size. |

## Accessibility

- Always connect the label with htmlFor, or let FormField do it.
- The asterisk is aria-hidden; screen readers hear “(required)” instead.

## Guidelines

**Do**

- Mark whichever is rarer, required or optional.

**Don’t**

- Use placeholder text instead of a label.

## Related

- https://stanceui.com/components/form-field
- https://stanceui.com/components/input