# Onboarding

Setting something up: stations along a groove (done ones with their lamp lit, the current one a raised cap) and a checklist of check keys with a progress slot.

Kit part · With the Kit · https://tactileui.dev/parts/onboarding

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The track is a grid of equal columns, so the stations space themselves. The done lamp and the raised cap are the kit’s lamp and key, drawn on the station. The checklist is the kit’s check keys and progress slot.

## Variants

- Three steps
- Five steps · all done
- Narrow · only the current name
- Checklist · all done

## States

- Start
- Under way
- All done

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-onboarding-go · aria-controls | attribute | On any key: steps the track it names. |
| setOnboardingStep(ol, n) · updateOnboarding(section) | function | Move the track to step n (steps + 1 = all done); recount a checklist. |
| Space · Tab | keyboard | Tick a task with Space; the track is read, not operated: its keys step it. |

## Usage notes

Step the track with Back and Next: ink runs along the groove and the lamps light behind you. Tick tasks off: the count, the slot and the next key follow.

## Accessibility

- Done is a lit lamp and the word.
- Tasks are real checkboxes with labels.
- Only the next task shows its key, so there is one contrast key on the surface and one obvious thing to do.
- Reduced motion stops the ink running along the groove; the track shows the same.
- Keyboard: the Next and Back keys and the task checks are native controls in the tab order. Enter or Space presses a key and Space ticks a check; the script adds no keys of its own.

## Related parts

- [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.
- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.