Component

Input

A clear and simple way to collect user data.

Value: lomer-ui

Installation

npx lomer-ui add input

Or copy-paste the

Usage

Bind value property to reflect input's value.

import Input from '$lib/components/ui/input.svelte'
let value = $state('')
<div class="flex flex-col items-center gap-4">
	<Input bind:value />
	<p>Value: {value || 'N/A'}</p>
</div>

Preview

Value: N/A

Examples

Loading

Add isLoading property.

<Input isLoading value="lomer-ui" />

Preview

Disabled

Add isDisabled property.

<Input isDisabled value="lomer-ui" />

Preview

Read only

Add isReadOnly property.

<Input isReadOnly value="lomer-ui" />

Preview