# Step

> Step shows one stage of a flow, for a layout that Stepper does not cover.

Source: /docs/components/step

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

## Status

`status` sets the segment, indicator and text colours. `number` is the 1-based position. Incomplete and current steps draw the number. A complete step draws a check instead.

`title` is the label and wraps inside the step. `description` renders under it only when given. Neither takes `null`, `undefined` or a boolean, which would leave an empty line.

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

export default function StepStatuses() {
  return (
    <>
      <Step
        status="complete"
        number={1}
        title="Your details"
        description="Name and email"
        className="w-[180px]"
      />
      <Step
        status="current"
        number={2}
        title="Address"
        description="Where to send it"
        className="w-[180px]"
      />
      <Step
        status="incomplete"
        number={3}
        title="Payment"
        description="Choose a method"
        className="w-[180px]"
      />
    </>
  )
}
```

## Sizes

`size` takes `sm`, `md` or `lg`, for a 20, 24 or 28px indicator. `sm` is the default.

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

export default function StepSizes() {
  return (
    <div className="flex items-start gap-spacing-16">
      <Step
        size="sm"
        status="current"
        number={1}
        title="Small"
        description="20px indicator"
        className="w-[180px]"
      />
      <Step
        size="md"
        status="current"
        number={1}
        title="Medium"
        description="24px indicator"
        className="w-[180px]"
      />
      <Step
        size="lg"
        status="current"
        number={1}
        title="Large"
        description="28px indicator"
        className="w-[180px]"
      />
    </div>
  )
}
```

## Orientation

`orientation="vertical"` puts the segment beside the body, stretched to the full step height. The default is `horizontal`, with the segment on top and a 160px minimum width. Step never switches orientation by itself.

A standalone step fills its container. Set a width with `className`.

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

export default function StepVertical() {
  return (
    <Step
      orientation="vertical"
      size="md"
      status="current"
      number={2}
      title="Verify identity"
      description="Upload a photo of your ID card"
      className="w-[360px]"
    />
  )
}
```

## Custom indicator and styles

`indicator` replaces the number or the check. `titleClassName` and `descriptionClassName` merge after the built-in look, so they win over it. Each takes one value for every status or a map keyed by status. A missing key takes the default for that status.

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

export default function StepCustom() {
  return (
    <>
      <Step
        status="current"
        number={1}
        indicator="A"
        title="Section A"
        description="Multiple choice"
        className="w-[180px]"
      />
      <Step
        status="complete"
        number={2}
        title="Section B"
        description="Short answers"
        titleClassName={{ complete: 'text-color-text-secondary' }}
        className="w-[180px]"
      />
    </>
  )
}
```

## Accessibility

- The current step sets `aria-current="step"`.
- Complete and incomplete steps add visually hidden words after the title, "Completed" and "Not started" by default. Localise them with `statusLabels`, for example `statusLabels={{ complete: 'เสร็จแล้ว', incomplete: 'ยังไม่เริ่ม' }}`.
- The indicator and the segment are decorative and `aria-hidden`.
- A step is static. It has no hover colour, no tab stop and no focus ring. Keep titles and descriptions noninteractive.

## API

### Step

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` (required) | `"complete" \| "current" \| "incomplete"` |  | Sets the segment, indicator and text colours. |
| `number` (required) | `number` |  | The step number, 1-based. Drawn in the indicator for incomplete and current steps. A complete step draws the check instead. The screen-reader ordinal always uses this, even with a custom `indicator`. |
| `indicator` | `PerStatus<StepText>` |  | Custom disc content. Replaces the number or the check. A map styles each status separately. `undefined` takes the status default. |
| `titleClassName` | `PerStatus<string>` |  | Classes merged after the default title style. A map styles each status separately; `tailwind-merge` resolves conflicts in favour of these. |
| `descriptionClassName` | `PerStatus<string>` |  | Classes merged after the default description style. Same merge rule as `titleClassName`. |
| `title` (required) | `StepText` |  | The label. It wraps inside the step. |
| `description` | `StepText` |  | A second line under the title. Rendered only when given. |
| `size` | `"lg" \| "md" \| "sm"` | `'sm'` | Defaults to `'sm'`. |
| `orientation` | `"horizontal" \| "vertical"` | `'horizontal'` | Defaults to `'horizontal'`. |
| `statusLabels` | `{ complete?: string; incomplete?: string }` |  | Screen-reader status words, merged over `{ complete: 'Completed', incomplete: 'Not started' }`. |
| `className` | `string` |  | Merged last with the token-aware `cn()`. A standalone step fills its container; set a width here. |