# Mono Label

A small uppercase caption in the monospace font.

```tsx
import { Card, CardContent, CardHeader, MonoLabel } from 'ferry-ui'

export default function MonoLabelHero() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <MonoLabel as="h3">Team members</MonoLabel>
      </CardHeader>
      <CardContent className="text-[13px] text-foreground-light">
        The team uses 8 of the 10 seats of the plan.
      </CardContent>
    </Card>
  )
}
```

## Usage guidelines

- **A caption of 1 to 4 words.** Use `MonoLabel` for a card title, a metric label, a column header or a menu group heading.
- **Not for sentences.** Do not use it for body text, a long sentence or the main heading of a page.
- **Use the element that fits the meaning.** The `as` prop sets the element.
- **A table has this look.** `TableHead` of [Table](/docs/components/table) shows its text the same way.

## Anatomy

Import the component. It has one part.

Write the text in normal case. The component shows it in uppercase.

```tsx title="Anatomy"

<MonoLabel>Monthly revenue</MonoLabel>
```

## Examples

### Element

`MonoLabel` is a `span` element by default. Set `as` to change the element. This example uses `legend` to name a group of controls.

```tsx
import { Checkbox, Label, MonoLabel } from 'ferry-ui'

export default function MonoLabelLegend() {
  return (
    <fieldset className="flex w-full max-w-xs flex-col gap-2.5">
      <MonoLabel as="legend" className="mb-2">
        Email notifications
      </MonoLabel>
      <Label className="text-[13px] font-normal text-foreground-light">
        <Checkbox name="notifications" value="invoices" defaultChecked />
        New invoices
      </Label>
      <Label className="text-[13px] font-normal text-foreground-light">
        <Checkbox name="notifications" value="summary" />
        Weekly summary
      </Label>
    </fieldset>
  )
}
```

| Value of `as` | Use |
| --- | --- |
| `span` (default), `div`, `p` | A caption. |
| `h2`, `h3`, `h4` | The heading of a section or of a menu group. |
| `dt` | A term in a description list. |
| `th` | A header cell in a table that you build with the `table` element. |
| `legend` | The name of a `fieldset` element. |
| `label` | The label of a form field. |

### Field label

With `as="label"`, pass `htmlFor` with the `id` of the field. A click on the label then moves the focus to the field.

For a field with a hint or an error, use [Field](/docs/components/field).

```tsx
import { Input, MonoLabel } from 'ferry-ui'

export default function MonoLabelForField() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <MonoLabel as="label" htmlFor="workspace-id">
        Workspace ID
      </MonoLabel>
      <Input id="workspace-id" mono readOnly defaultValue="ws_8f3a9c1e" />
    </div>
  )
}
```

### Color

The text uses the `foreground-lighter` token. Add a `text-*` token class to change the color.

```tsx
import { MonoLabel } from 'ferry-ui'

export default function MonoLabelColor() {
  return (
    <>
      <MonoLabel>Due date</MonoLabel>
      <MonoLabel className="text-destructive">Overdue</MonoLabel>
      <MonoLabel className="text-foreground">Total</MonoLabel>
    </>
  )
}
```

### Long text

In a narrow space, do not let the caption wrap. Add `truncate`. Give the full text in `title`.

```tsx
import { MonoLabel } from 'ferry-ui'

const TEXT = 'Invitations from other workspaces'

export default function MonoLabelTruncate() {
  return (
    <MonoLabel as="div" title={TEXT} className="w-40 truncate">
      {TEXT}
    </MonoLabel>
  )
}
```

### The mono-label class

The `mono-label` class gives the same look to an element of your own.

```tsx
export default function MonoLabelClass() {
  return (
    <figure className="flex flex-col gap-1">
      <figcaption className="mono-label">Monthly revenue</figcaption>
      <span className="text-2xl text-foreground tabular">$12,480</span>
    </figure>
  )
}
```

## API reference

`MonoLabel` also accepts each global HTML attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"div" \| "dt" \| "h2" \| "h3" \| "h4" \| "label" \| "legend" \| "p" \| "span" \| "th"` | `span` | Element to render. Defaults to `span`. Use `h2`/`h3` for section and menu-group headings, `dt` inside description lists, `th` in hand-built tables (the Table primitive's `TableHead` already has this look), `legend` inside a `fieldset`, `label` (with `htmlFor`) for form fields. |
| `htmlFor` | `string` |  | Id of the form control this label describes. Only meaningful with `as="label"`. |
| `scope` | `string` |  | Cells this header describes (`col`, `row`…). Only meaningful with `as="th"`. |