Skip to main content

A text field with its label, description and error in one: passwords get a reveal button.

We send the sign-in link here.

Usage

Example.svelte
<script lang="ts">
	import Input from "@zedensix/ui/components/input";

	let email = $state("");
</script>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<Input
		label="Email"
		name="email"
		type="email"
		autocomplete="email"
		required
		description="We send the sign-in link here."
		bind:value={email}
	/>
	<Input label="Password" name="password" type="password" />
	<Input label="Project name" name="project" error="This name is taken." />
	<Input label="Read only" value="acme-workspace" disabled />
</div>