Input

The Input component provides a styled text input control that allows users to enter and edit text. It supports various input types and can be used in forms and other interactive elements.

Usage

<script>
  import { Input } from "$lib/components/ui/input";
</script>

<Input placeholder="Enter your name" />

Examples

Basic Input

A simple text input field.

Input Types

Input components with different types.

Disabled Input

An input in its disabled state.

Input with Label

Input with an associated label for accessibility.

Input with Button

Input combined with a button for search functionality.

Input with Icon

Input with an icon for visual enhancement.

API Reference

Properties

The Input component accepts all standard HTML input attributes plus the following:

Property	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to apply to the input.
`ref`	`HTMLInputElement`	`null`	Reference to the underlying input element.
`type`	`string`	`"text"`	The type of the input element.
`value`	`string`	`""`	The value of the input element.

Implementation

The Input component is a styled wrapper around the native HTML input element with custom focus, hover, and disabled styles:

// Input styling
'flex h-9 w-full rounded-md border border-border-weak bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-warm disabled:cursor-not-allowed disabled:opacity-50'

The component is built with accessibility in mind, ensuring it works well with screen readers and keyboard navigation. It’s designed to be used in forms and integrates well with other UI components.