Input

Input fields allow users to enter and edit single-line text data.

Import​

<script>
  import { Input } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

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

Props​

Prop	Type	Default	Description
type	string	'text'	HTML input type
value	string | number	''	Input value (bindable)
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the input
readonly	boolean	false	Makes the input read-only
required	boolean	false	Marks as required
name	string	-	Input name for forms
id	string	-	Input ID for label association
autocomplete	AutoFill	-	Browser autocomplete hint
inputmode	'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'	-	Mobile keyboard hint
class	string	-	Additional CSS classes
onValueChange	(value: string) => void	-	Callback when value changes

Input Types​

Text (Default)​

<Input type="text" placeholder="Enter name" />

Email​

<Input type="email" placeholder="your@email.com" autocomplete="email" />

Password​

<Input type="password" placeholder="Enter password" autocomplete="current-password" />

Number​

<Input type="number" placeholder="0" />

Search​

<Input type="search" placeholder="Search..." />

Tel (Phone)​

<Input type="tel" placeholder="(555) 123-4567" autocomplete="tel" inputmode="tel" />

URL​

<Input type="url" placeholder="https://example.com" inputmode="url" />

Input Modes​

The inputmode attribute hints to mobile browsers which keyboard to show:

Mode	Keyboard Type
text	Standard text keyboard
numeric	Numeric keyboard (0-9)
decimal	Numeric with decimal point
tel	Phone number keyboard
email	Email keyboard with @ symbol
url	URL keyboard with / and .com
search	Search keyboard with search button

<!-- Show numeric keyboard on mobile -->
<Input inputmode="numeric" placeholder="Enter amount" />

Two-Way Binding​

Use Svelte's bind:value for two-way data binding:

<script>
  let name = $state('');
</script>

<Input bind:value={name} placeholder="Your name" /><p>Hello, {name}!</p>

Value Change Callback​

Use onValueChange for controlled input handling:

<script>
  let value = $state('');

  function handleChange(newValue: string) {
    value = newValue.toUpperCase();
  }
</script>

<Input {value} onValueChange={handleChange} placeholder="Auto uppercase" />

States​

Disabled​

<Input disabled value="Cannot edit" />

Read-only​

<Input readonly value="Read only value" />

Required​

<Input required placeholder="Required field" />

With Label​

Always associate inputs with labels for accessibility:

<script>
  import { Input, Label } from '@classic-homes/theme-svelte';
</script>

<div class="space-y-2">
  <Label for="email">Email Address</Label>
  <Input id="email" type="email" placeholder="your@email.com" />
</div>

File Input​

Style file inputs consistently:

<Input type="file" accept="image/*" />

Autocomplete​

Use autocomplete for browser autofill support:

<Input autocomplete="name" placeholder="Full name" />
<Input autocomplete="email" type="email" placeholder="Email" />
<Input autocomplete="tel" type="tel" placeholder="Phone" />
<Input autocomplete="street-address" placeholder="Address" />
<Input autocomplete="new-password" type="password" placeholder="New password" />

Common autocomplete values:

• name, given-name, family-name
• email, tel
• street-address, postal-code, country
• current-password, new-password
• cc-number, cc-exp, cc-csc

Accessibility​

The Input component includes:

• Full keyboard navigation
• Visible focus ring with focus-visible
• Disabled state with cursor-not-allowed
• Proper aria-disabled when disabled
• Works with <label> associations via id

Examples​

Search Input​

<div class="relative">
  <svg
    class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
    />
  </svg>
  <Input type="search" placeholder="Search..." class="pl-10" />
</div>

Input with Button​

<div class="flex gap-2">
  <Input placeholder="Enter email" class="flex-1" />
  <Button>Subscribe</Button>
</div>

Custom Width​

<Input class="w-64" placeholder="Fixed width" />
<Input class="max-w-sm" placeholder="Max width" />

Related Components​

• Label - Label for form inputs
• FormField - Complete field with label and validation
• Textarea - Multi-line text input