Forms

Real <input>, <textarea>, and <button> elements with classes from forms.css. Inline-editable contenteditable divs are out of scope for v0.1.

Underline text input

Single line, transparent background, accent underline on focus.

Sunken textarea

Multi-line input nested inside a card or confirmation surface.

Custom select trigger

Visual only in v0.1. Full select replaces NuxtUI USelect once Reka UI lands.

Select menu — string items

Drop-in replacement for NuxtUI <USelectMenu>. When `items` is a list of strings, the value emitted matches the string itself.

Selected: Banana

Select menu — object items + valueKey

Items are { label, value } objects; `value-key` tells the menu which key carries the model value. Items can also be disabled. Mirrors the call-shape used by ApplicationDialog and friends.

Selected: full-time

Select menu — multi-select

`multiple` switches the model to an array. The trigger renders comma-joined labels when short, otherwise an `N selected` count. Each item gets a check indicator on selection.

Selected: typescript, vue

Select menu — searchable

`searchable` adds a typeahead filter input above the list. Built on reka-ui Combobox primitives; items are filtered by their textContent. Reach for this when the list grows past ~10 options.

Select menu — disabled

The whole control can be disabled, or individual items via `disabled: true` on the option object.

Composed form

All four primitives together inside a card.

Checkboxes

Real <input type='checkbox'> with appearance:none and a sienna fill on checked. Supports boolean and array v-model plus indeterminate state.

Skills (array v-model)Selected: TypeScript, Vue
Indeterminate (select all)

Toggles

Boolean switch built on a real <input type='checkbox' role='switch'>. Use for settings — on/off — where a checkbox would feel transactional.

Radios

Single-select group. Vertical stack by default; horizontal modifier for compact rows.

Employment type (vertical)
Selected: full-time
Size (horizontal)