Input

Text input field for user data entry. Supports various types, sizes, and states.

Installation

Import

import { Input } from '@svelte-atoms/core/input';

Why a Compound Component?

Input is designed as a compound component (Root, Control, Icon, Placeholder) to maximize reusability. This means other components can reuse Input.Root styling without recreating it from scratch. For example, a dropdown trigger can look exactly like an input by wrapping its content with Input.Root, maintaining consistent styling across your application.

Preset Configuration

Customize the input appearance using presets

You can customize the default styles for Input components by defining presets in your configuration:

The Input component uses a compound structure with separate preset keys for Root, Control, Icon, and Placeholder.

Examples

Explore different input variations

Basic Input

Simple text input

Code

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

Input Types

Different input types for various data

Code

<Input.Root>
  <Input.Control type="text" placeholder="Text input" />
</Input.Root>

<Input.Root>
  <Input.Control type="email" placeholder="Email input" />
</Input.Root>

<Input.Root>
  <Input.Control type="password" placeholder="Password input" />
</Input.Root>

<Input.Root>
  <Input.Control type="number" placeholder="Number input" />
</Input.Root>

Input with Icons

Add icons or text decorations around the input

.00

Code

<Input.Root>
  <Input.Icon>$</Input.Icon>
  <Input.Control placeholder="0.00" />
  <Input.Icon>.00</Input.Icon>
</Input.Root>

Input with Placeholder

Custom placeholder component that disappears when input has value

Enter your email...

Code

<Input.Root>
  <Input.Control />
  <Input.Placeholder>Enter your email...</Input.Placeholder>
</Input.Root>

Controlled Input

Bind input value to state

You typed: (nothing yet)

Code

<script lang="ts">
  let value = $state('');
</script>

<Input.Root>
  <Input.Control bind:value />
</Input.Root>
<p>You typed: {value}</p>

API Reference

Input.Root

Container component that manages input state and context.

Prop

Type

Default

Description

value

string | number

undefined

Controlled value (bindable)

checked

boolean

undefined

Checked state for checkbox/radio inputs (bindable)

files

File[]

[]

Files for file input (bindable)

preset

string

'input'

Preset configuration key

class

string

Additional CSS classes

Input.Control

The actual input element.

Prop

Type

Default

Description

type

HTMLInputTypeAttribute

'text'

Input type (text, email, password, number, date, file, etc.)

value

any

undefined

Input value (bindable)

number

undefined

Number value for type="number" (bindable)

date

Date

null

Date value for date inputs (bindable)

files

File[]

[]

Files for type="file" (bindable)

checked

boolean

undefined

Checked state (bindable)

placeholder

string

Native placeholder text

preset

string

'input.control'

Preset configuration key

class

string

Additional CSS classes

Input.Icon

Icon or text decoration component.

Prop

Type

Default

Description

preset

string

'input.icon'

Preset configuration key

class

string

Additional CSS classes

Input.Placeholder

Custom placeholder component that automatically hides when input has value.

Prop

Type

Default

Description

preset

string

'input.placeholder'

Preset configuration key

class

string

Additional CSS classes

Form

Label