Input

A styled text input component.

bun x bosia@latest add input

A styled text input with bindable value.

Preview

Text

Disabled (label dims automatically)

Props

Prop	Type	Default
`type`	`string`	`"text"`
`value`	`string`	`""`
`placeholder`	`string`	`""`
`disabled`	`boolean`	`false`
`id`	`string`	—
`name`	`string`	—

Usage

<script lang="ts">
	import { Input } from "$lib/components/ui/input";
	let search = $state("");
</script>

<Input bind:value={search} placeholder="Search..." />

With Label

<label for="email" class="text-sm font-medium">Email</label>
<Input id="email" type="email" placeholder="you@example.com" />