Components / Text & numbers
Input
A 32px text field with label, hint, error, icon and trailing slots.
@ruckc/truss-ui Text & numbers
Import
import { Input } from '@ruckc/truss-ui';Playground
size
value
API
Also accepts every attribute of HTMLInputAttributes, applied to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
value bindable | string | number | null | — | The current value. Bind it with `bind:value`. |
label | string | — | Visible label shown above the control. |
hint | string | — | Helper text shown below the control. |
error | string | — | Error message. Marks the control invalid, replaces the hint, and is announced to assistive technology. |
icon | IconSource | — | Name of a built-in icon to show. |
right snippet | Snippet | — | Content shown at the end of the field, as a Svelte snippet. |
size | 'sm' | 'md' | 'lg' | 'md' | Control size: `sm` (24px), `md` (32px, default) or `lg` (40px). |