Input

Text input field with label, error states, and helper text.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Input.svelte

Usage

<script>
  import Input from '$lib/components/Input.svelte';

  let email = $state('');
  let password = $state('');
  let username = $state('');
</script>

<!-- Basic input -->
<Input
  bind:value={email}
  type="email"
  label="Email"
  placeholder="Enter your email"
/>

<!-- Input with helper text -->
<Input
  bind:value={username}
  label="Username"
  placeholder="Choose a username"
  helperText="Must be 3-20 characters"
/>

<!-- Input with error -->
<Input
  bind:value={password}
  type="password"
  label="Password"
  placeholder="Enter your password"
  required
  error={password.length > 0 && password.length < 8 ? 'Password must be at least 8 characters' : ''}
/>

<!-- Disabled input -->
<Input
  value="readonly@example.com"
  label="Account Email"
  disabled
/>

Props

Prop	Type	Default	Description
value	string	''	Input value (bindable)
type	string	'text'	Input type (text, email, password, etc.)
label	string	''	Label text displayed above the input
placeholder	string	''	Placeholder text
disabled	boolean	false	Whether the input is disabled
required	boolean	false	Whether the input is required (adds asterisk to label)
error	string	''	Error message to display below input
helperText	string	''	Helper text displayed below input when no error
id	string	''	Input id attribute (auto-generated if not provided)
name	string	''	Input name attribute
class	string	''	Additional CSS classes for the input element

Files

Input.svelte