Form Inputs

A controlled single-line input for machine-shaped values. The monospace face and the disabled spell-check / autocomplete / autocapitalize / autocorrect attributes are baked in, not opt-in: a slug or token must round-trip exactly as typed. The caller owns the value signal and receives keystrokes via `on_input`; no internal state, disposal-safe.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: code-input
props:
  value: ${state.slug}
  on_input: ${actions.set_slug}
  placeholder: my-element-slug

type: code-input
props:
  value: sk-not-a-valid-key
  on_input: ${actions.set_key}
  placeholder: sk-…
  error: true

A controlled colour field. A native `<input type=color>` swatch opens the OS picker; a monospace hex readout sits beside it so the value is visible and copyable. The value is the native `#rrggbb` string. The caller owns the value signal; changes arrive via `on_change`. No internal state, disposal-safe.

Readiness

complete

Preview

live

Props

3

Examples

2

Code

implementation mapped

type: color-input
props:
  value: '#71c9ec'
  on_change: ${actions.set_accent}

type: color-input
props:
  value: '#a78bfa'
  on_change: ${actions.set_tag_color}

A controlled date field. The value is the native `<input type=date>` contract — an ISO-8601 `YYYY-MM-DD` string — so it serialises cleanly and round-trips through APIs without locale ambiguity. Optional `min` / `max` bound the selectable range. The caller owns the value signal; changes arrive via `on_change`. No internal state, disposal-safe.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: date-input
props:
  value: 2026-06-01
  on_change: ${actions.set_due_date}

type: date-input
props:
  value: 2026-05-17
  on_change: ${actions.set_date}
  min: 2026-04-01
  max: 2026-06-30

An email field that specialises `<Input>` with built-in email-format validation surfaced as an inline helper/error message, so login/signup/settings forms stop reimplementing the same regex + error wiring. It lives portal-side today (`portal/src/components/form.rs`) with this catalog entry as the stable contract.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: stack
props:
  direction: column
  gap: sm
children:
- type: text
  slots:
    default: Email
- type: input
  props:
    placeholder: you@example.com
    value: ''

type: stack
props:
  direction: column
  gap: sm
children:
- type: input
  props:
    placeholder: you@example.com
    value: not-an-email
- type: text
  slots:
    default: Enter a valid email address

The reusable substrate of IdentityPicker. A visually-hidden `<input type=file>` keeps the native file dialog and form semantics; a styled trigger button proxies its click so the affordance matches the design system; a live `aria-live` list previews selected file names. The selection-name signal is component-scoped (created at the component owner, never inside a `<Show>`/`<For>`) and the only DOM handle is a `NodeRef` Leptos cleans up — disposal-safe. Selected names are emitted via `on_files`.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: file-picker
props:
  label: Attach a file
  on_files: ${actions.set_attachment}

type: file-picker
props:
  label: Upload images
  on_files: ${actions.set_images}
  multiple: true
  accept: image/*

InlineEdit lets a label become editable in place. It is best for short, low-risk values such as names, titles, and labels where opening a full form would slow the workflow.

Readiness

complete

Preview

live

Props

3

Examples

1

Code

implementation mapped

type: inline-edit
props:
  value: Daily contact sync
  placeholder: Name this element

Single-line text input with consistent focus, disabled, and error visual treatment. Use `input_type: password` for secrets. Wrap with `field` for labelled forms.

Readiness

complete

Preview

live

Props

9

Examples

3

Code

implementation mapped

type: input
props:
  value: ${state.username}
  on_input: ${actions.set_username}
  placeholder: Username
  auto_focus: true

type: input
props:
  value: ${state.password}
  on_input: ${actions.set_password}
  input_type: password
  placeholder: Password
  error: ${state.has_error}

type: stack
props:
  gap: sm
  direction: column
children:
- type: input
  props:
    input_type: text
    placeholder: text
- type: input
  props:
    input_type: password
    placeholder: password
- type: input
  props:
    input_type: email
    placeholder: email@example.com
- type: input
  props:
    input_type: number
    placeholder: number
- type: input
  props:
    input_type: search
    placeholder: search
- type: input
  props:
    input_type: url
    placeholder: https://...
- type: input
  props:
    input_type: tel
    placeholder: +1 555 0100

A controlled numeric input with explicit decrement / increment buttons. The caller owns the value signal; the buttons compute the next clamped value from the current signal and emit it via `on_change`, so the component holds no internal state and is disposal-safe. Values are clamped to `[min, max]` on every change, whether typed or stepped.

Readiness

complete

Preview

live

Props

6

Examples

2

Code

implementation mapped

type: number-stepper
props:
  value: 2
  on_change: ${actions.set_quantity}
  min: 1
  max: 10
  step: 1

type: number-stepper
props:
  value: 15
  on_change: ${actions.set_retries}
  min: 0
  max: 60
  step: 5

A password field that specialises `<Input>` with a show/hide eye toggle, so login/signup/change-password forms stop reimplementing the masked-state UX (and the a11y of the toggle) every time. It lives portal-side today (`portal/src/components/form.rs`) with this catalog entry as the stable contract.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: stack
props:
  direction: row
  gap: sm
children:
- type: input
  props:
    placeholder: Password
    value: ••••••••
- type: icon-button
  props:
    icon: visibility
    aria_label: Show password

type: stack
props:
  direction: row
  gap: sm
children:
- type: input
  props:
    placeholder: Password
    value: hunter2
- type: icon-button
  props:
    icon: visibility_off
    aria_label: Hide password

A text input specialised for search queries. The magnifier icon prefix and clear-affordance (× appears once the user has typed) are structural, not opt-in props. Pair with debouncing in the caller via `${actions.x}` or use `use_debounced` from the hooks module.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: search-input
props:
  value: ${state.filter_query}
  on_input: ${actions.set_filter_query}
  placeholder: Search agents...

type: search-input
props:
  value: ${state.palette_query}
  on_input: ${actions.set_palette_query}
  placeholder: Type to search commands...
  auto_focus: true

A controlled bounded-numeric drag input. The caller owns the value signal and receives every change via `on_change`; the component holds no internal state, so it is disposal-safe inside showcase `<Show>`/`<For>` scopes. Use Slider when the value is continuous and both bounds are known (e.g. 0–100 opacity). The optional live readout shows the current value without the caller wiring a separate label.

Readiness

complete

Preview

live

Props

7

Examples

2

Code

implementation mapped

type: slider
props:
  value: 70
  on_change: ${actions.set_opacity}
  min: 0
  max: 100
  step: 1

type: slider
props:
  value: 50
  on_change: ${actions.set_value}
  min: 0
  max: 100
  step: 25
  show_value: false

Multi-line text entry with consistent focus, disabled, and error treatment. Use for multi-paragraph content (descriptions, comments, prompts). Pair with `field` for labelled forms; rely on `placeholder` only for ephemeral hint text. Auto-grow via the `rows` prop is the fixed canonical mechanism for variable height.

Readiness

complete

Preview

live

Props

7

Examples

3

Code

implementation mapped

type: field
props:
  label: Description
  field_id: desc
slots:
  default:
  - type: textarea
    props:
      value: ${state.description}
      on_input: ${actions.set_description}
      placeholder: Tell us about this circle...
      rows: 5

type: textarea
props:
  value: ${state.feedback}
  on_input: ${actions.set_feedback}
  error: true
  rows: 4

type: stack
props:
  gap: md
  direction: column
children:
- type: textarea
  props:
    rows: 2
    placeholder: rows=2
- type: textarea
  props:
    rows: 4
    placeholder: rows=4
- type: textarea
  props:
    rows: 8
    placeholder: rows=8

A controlled time field. The value is the native `<input type=time>` contract — an `HH:MM` 24-hour string — so it serialises cleanly and is locale-stable. Optional `step` (in seconds) controls granularity, e.g. `60` for minute steps or `1` to expose seconds. The caller owns the value signal; changes arrive via `on_change`. No internal state, disposal-safe.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: time-input
props:
  value: 08:00
  on_change: ${actions.set_reminder_time}

type: time-input
props:
  value: 12:30
  on_change: ${actions.set_time}
  step: 1

A controlled multi-value field. Committed tokens render as removable chips driven by the caller-owned `tokens` signal; Enter commits the trimmed draft (de-duplicated), Backspace on an empty field removes the last chip, and each chip has a × remove button. The in-progress draft is a component-scoped signal (created at the component owner, never inside a `<Show>`/`<For>`), so it is disposal-safe. The full list is emitted via `on_change` on every mutation.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: token-input
props:
  tokens:
  - rust
  - leptos
  on_change: ${actions.set_tags}
  placeholder: Add a tag…

type: token-input
props:
  tokens:
  - ops@triform.ai
  on_change: ${actions.set_recipients}
  placeholder: Add a recipient…