Command

PePersonal JEJust Electrolyte RTRelease Timer TtTacTile CSClearSource AtAthletic

TacTile›Launch TacTile›Foundations›Shared Packages·5 in this wave

Wave

Shared Packages

@tactile/ui primitives every surface depends on. First-mover work — iOS, Android, and Web are all blocked on these.

TacTile › Launch TacTile › Foundations › Shared Packages

4/5 done1 open1 open blocker

Selected taskclear

Add Input/Select/Checkbox/Radio/Textarea primitives to @tactile/ui

DoneOwner · Vivt_f4e9384b

Form primitives for the design system; every surface consumes these.

Unlocks 1Approve: Shared Packages

Show the prompt

You are Viv, the agent for the TacTile lane of Command.

Open the lane and work there:

```bash
cd ~/Command/tactile && claude
```

Read that lane's CLAUDE.md and lane.json before you touch anything — they
carry your identity, your scope, and the hazards specific to this lane.
Read state from the hub (https://internal.tactile.to) or ask. Never guess at it.

## The task

**Add Input/Select/Checkbox/Radio/Textarea primitives to @tactile/ui** · done

Form primitives for the design system; every surface consumes these.

Where it sits: TacTile › Launch TacTile › Foundations › Shared Packages

## Unlocks 1

- Approve: Shared Packages

## The brief on file

Viv — add Input/Select/Checkbox/Radio/Textarea primitives to @tactile/ui.

--- DONE 2026-07-27 (Viv) · commit f901df9f ---
All five shipped plus a shared Field wrapper, each with a stories file per packages/ui/AGENTS.md. Verified: tsc clean, build:web compiles, depcruise/knip/sherif/syncpack all at their pre-existing counts (zero new findings).

BUILT ON NATIVE ELEMENTS, NOT RADIX — deliberate. Native inputs are accessible by default, submit without JavaScript, render on the server, and get browser autofill free. Radix is used elsewhere in this package where behaviour genuinely needs it (focus traps, portals); a text field doesn't. Only the three overlay primitives pulled Radix deps.

field.tsx carries the shared chrome so every control wires up identically: a generated id via useId when none is passed, label→control association, and the aria-describedby / aria-errormessage links. Asking each call site to invent an id is how those links quietly go missing.

DESIGN CALLS WORTH KNOWING BEFORE BUILDING ON THESE:
- Error REPLACES the hint rather than stacking beneath it.
- Select is a native <select>, so mobile gets the OS picker — faster and more familiar than a custom listbox, and it costs no JS. If a design later needs rich option rows (icons, descriptions) that is a NEW component, not a variant of this one.
- Select's placeholder option renders disabled: a required select with a re-selectable empty option passes validation while holding no value.
- Checkbox/Radio keep the real input in the DOM — transparent and stretched over the visual box via Tailwind peer state, not sr-only plus a fake control. Preserves keyboard behaviour, form submission, :checked, :indeterminate and native radio arrow-key navigation.
- Checkbox supports indeterminate via a ref effect (there is no HTML attribute for it).
- RadioGroup uses fieldset/legend so assistive tech announces the set as one labelled control.

No sign-off needed on anything here — these follow the existing button.tsx conventions (cva variants, forwardRef, cn, semantic Tailwind tokens) and introduce no new design decisions.

## How to work this

- Do the work, don't just plan it. If the fix is obvious and safe, make it.
- Surface anything needing Matthew's sign-off instead of deciding it yourself.
- Short replies. Lead with the answer, then stop.
- Finish by saying what changed, what you verified, and what you'd do next.

To doIn progressDoneBlockedPick a wave on the left · tap a task to expand it

Lanes

Shared Packages

Add Input/Select/Checkbox/Radio/Textarea primitives to @tactile/ui