Forms

Input

Capture user text input with a flexible, accessible input field. Supports variants, colors, icons, avatars, loading states, and highlights.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Placeholder

Disabled

Basic Usage

Import and use the Input component with a placeholder prop.

<script lang="ts">
  import { Input } from 'sv5ui';
</script>

<Input placeholder="Enter text..." />

Variants

5 visual styles for different contexts and emphasis levels.

<Input variant="outline" placeholder="Outline" />
<Input variant="none" placeholder="None" />
<Input variant="soft" placeholder="Soft" />
<Input variant="subtle" placeholder="Subtle" />
<Input variant="ghost" placeholder="Ghost" />

Sizes

5 sizes from extra small to extra large.

<Input size="xs" placeholder="Extra Small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
<Input size="xl" placeholder="Extra Large" />

Colors

Semantic color schemes to match your design context.

<Input color="primary" placeholder="Primary" />
<Input color="secondary" placeholder="Secondary" />
<Input color="tertiary" placeholder="Tertiary" />
<Input color="success" placeholder="Success" />
<Input color="warning" placeholder="Warning" />
<Input color="error" placeholder="Error" />
<Input color="info" placeholder="Info" />

With Icons

Add leading and trailing icons using Iconify names.

<!-- Leading icon (shorthand) -->
<Input icon="lucide:search" placeholder="Search..." />

<!-- Leading icon (explicit) -->
<Input leadingIcon="lucide:mail" placeholder="Email" />

<!-- Trailing icon -->
<Input trailingIcon="lucide:eye" placeholder="Password" type="password" />

<!-- Both icons -->
<Input leadingIcon="lucide:link" trailingIcon="lucide:copy" placeholder="https://example.com" />

With Avatar

Display an avatar in the leading position using the avatar prop.

<Input
  avatar={{ src: 'https://i.pravatar.cc/40', alt: 'User' }}
  placeholder="What's on your mind?"
/>

Loading

Show a loading spinner inside the input.

<Input loading placeholder="Loading..." />

Highlight

Add a colored highlight ring to draw attention to the input.

<Input highlight placeholder="Highlighted input" />
<Input highlight color="error" placeholder="Error highlight" />

Disabled

Prevent user interaction with the disabled state.

<Input disabled placeholder="Disabled input" />
<Input disabled value="Cannot edit this" />

Types

Support for various HTML input types.

<Input type="text" placeholder="Text" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="email" placeholder="Email address" />

UI Slots

Use the ui prop to override classes on specific internal elements of the Input.

Slot	Description
`root`	Outermost wrapper element — controls overall layout and spacing
`base`	Inner input element — controls shape, padding, typography
`leading`	Leading content wrapper — controls leading area layout
`leadingIcon`	Icon before the input — controls icon size, color
`leadingAvatar`	Avatar before the input — controls avatar wrapper styles
`leadingAvatarSize`	Avatar size override — controls avatar dimensions
`trailing`	Trailing content wrapper — controls trailing area layout
`trailingIcon`	Icon after the input — controls icon size, color

<Input
  placeholder="Custom styled"
  leadingIcon="lucide:search"
  ui={{
    base: 'rounded-full',
    leadingIcon: 'text-primary'
  }}
/>

Snippets

Use snippets to fully replace the leading or trailing content with custom markup.

Snippet	Replaces	Description
`leadingSlot`	`leadingIcon / avatar`	Custom content before the input — replaces icon and avatar
`trailingSlot`	`trailingIcon`	Custom content after the input — replaces trailing icon

https://

<Input placeholder="example.com" ui={{ base: 'ps-18' }}>
  {#snippet leadingSlot()}
    <span class="border-r border-on-surface/15 pr-2 text-xs font-medium text-on-surface/50">https://</span>
  {/snippet}
  {#snippet trailingSlot()}
    <Button size="xs" variant="solid" color="primary" label="Go" />
  {/snippet}
</Input>

Props

Prop	Type	Default	Description
`ref`	`HTMLInputElement`	`-`	Bind to the underlying input element
`value`	`string`	`-`	Input value (use bind:value)
`type`	`string`	`'text'`	HTML input type (text, password, email, number, etc.)
`variant`	`'none' \| 'outline' \| 'soft' \| 'subtle' \| 'ghost'`	`'outline'`	Visual style of the input
`color`	`Color`	`'primary'`	Color scheme
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Input dimensions
`highlight`	`boolean`	`false`	Show a colored highlight ring
`loading`	`boolean`	`false`	Show loading spinner
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`disabled`	`boolean`	`false`	Disable the input
`icon`	`string`	`-`	Leading icon shorthand (Iconify name)
`leadingIcon`	`string`	`-`	Icon before the input
`trailingIcon`	`string`	`-`	Icon after the input
`trailing`	`boolean`	`false`	Move icon to trailing side
`avatar`	`AvatarProps`	`-`	Avatar in the leading position
`placeholder`	`string`	`-`	Placeholder text
`id`	`string`	`-`	HTML id attribute
`name`	`string`	`-`	HTML name attribute
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

Checkbox RadioGroup