Back to Components

Foundation

Input

Base text input primitive. Other inputs (SearchInput, NumberInput, etc.) compose this.

Examples

Basic

<Input bind:value placeholder="Steve" />

Pill shape

<Input shape="pill" placeholder="Pill" />

Sizes

<Input size="sm" placeholder="Small" />
<Input placeholder="Default" />

Props

PropTypeDefaultDescription
valuestring''Bindable value. Use bind:value.
shape'pill' | 'rounded' | 'square''rounded'Corner shape.
size'sm' | 'md''md'Height tier.
leadingSnippetInline adornment slot on the left (icon, prefix).
trailingSnippetInline adornment slot on the right (clear, kbd hint).
inputClassstringClass applied to the inner <input> element.
...restHTMLInputAttributesSpread onto the underlying <input>.

Install

CLI

npx @a3tai/mittsu add input