Input field

Setup

<script lang="ts">
	import { Input } from 'svelte-5-ui-lib';
	let { text = $bindable('') } = $props();
</script>

Interactive Input Builder

<Input/>

Click handler

<script lang="ts">
	import { EyeOutline, EyeSlashOutline } from 'flowbite-svelte-icons';
	import { Input, Label, InputAddon, ButtonGroup } from 'svelte-5-ui-lib';
	let show = $state(false);
	let show1 = $state(false);
</script>

<form class="mb-4">
	<Label for="show-password" class="mb-2">Your password</Label>
	<Input
		id="show-password"
		name="show-password"
		autocomplete="new-password"
		type={show ? 'text' : 'password'}
		placeholder="Your password here"
		size="lg"
		class="pl-10"
	>
		{#snippet left()}
			<button onclick={() => (show = !show)} class="pointer-events-auto">
				{#if show}
					<EyeOutline class="h-6 w-6" />
				{:else}
					<EyeSlashOutline class="h-6 w-6" />
				{/if}
			</button>
		{/snippet}
	</Input>
</form>

<form>
	<Label for="show-password1" class="mb-2">Your password</Label>
	<ButtonGroup class="w-full">
		<InputAddon>
			<button onclick={() => (show1 = !show1)}>
				{#if show1}
					<EyeOutline class="h-6 w-6" />
				{:else}
					<EyeSlashOutline class="h-6 w-6" />
				{/if}
			</button>
		</InputAddon>
		<Input
			id="show-password1"
			type={show1 ? 'text' : 'password'}
			name="show-password1"
			autocomplete="new-password"
			placeholder="Your password here"
		/>
		<Input id="usename" name="usename" type="text" class="hidden" />
	</ButtonGroup>
</form>

Dropdown

<script lang="ts">
	import { Button, ButtonGroup, Dropdown, DropdownLi, DropdownUl, Input, uiHelpers } from 'svelte-5-ui-lib';
	import { sineIn } from 'svelte/easing';
	import { ChevronDownOutline, SearchOutline } from 'flowbite-svelte-icons';

	let dropdown = uiHelpers();
	let dropdownStatus = $state(false);
	let closeDropdown = dropdown.close;
	let transitionParams = {
		y: 0,
		duration: 200,
		easing: sineIn
	};
	$effect(() => {
		// this can be done adding nav.navStatus directly to DOM element
		// without using effect
		dropdownStatus = dropdown.isOpen;
	});
</script>

<div class="h-48">
	<ButtonGroup class="w-full">
		<Button
			onclick={dropdown.toggle}
			class="flex-shrink-0 border border-gray-300 bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
		>
			All categories<ChevronDownOutline class="ms-2 h-6 w-6" />
		</Button>
		<div class="relative">
			<Dropdown
				{dropdownStatus}
				{closeDropdown}
				params={transitionParams}
				class="absolute top-[40px] -left-[160px]"
			>
				<DropdownUl>
					<DropdownLi href="/">Shopping</DropdownLi>
					<DropdownLi href="/">Images</DropdownLi>
					<DropdownLi href="/">News</DropdownLi>
					<DropdownLi href="/">Finance</DropdownLi>
				</DropdownUl>
			</Dropdown>
		</div>
		<Input placeholder="Search" />
		<Button color="primary" class="!p-2.5" type="submit">
			<SearchOutline class="h-5 w-5" />
		</Button>
	</ButtonGroup>
</div>

Form

<script lang="ts">
	import { Input, Label, Checkbox, Button, A } from 'svelte-5-ui-lib';
</script>

<form>
	<div class="mb-6 grid gap-6 md:grid-cols-2">
		<div>
			<Label for="first_name" class="mb-2">First name</Label>
			<Input type="text" id="first_name" placeholder="John" required />
		</div>
		<div>
			<Label for="last_name" class="mb-2">Last name</Label>
			<Input type="text" id="last_name" placeholder="Doe" required />
		</div>
		<div>
			<Label for="company" class="mb-2">Company</Label>
			<Input type="text" id="company" placeholder="Flowbite" required />
		</div>
		<div>
			<Label for="phone" class="mb-2">Phone number</Label>
			<Input
				type="tel"
				id="phone"
				placeholder="123-45-678"
				pattern={'[0-9]{3}-[0-9]{2}-[0-9]{3}'}
				required
			/>
		</div>
		<div>
			<Label for="website" class="mb-2">Website URL</Label>
			<Input type="url" id="website" placeholder="flowbite.com" required />
		</div>
		<div>
			<Label for="visitors" class="mb-2">Unique visitors (per month)</Label>
			<Input type="number" id="visitors" placeholder="" required />
		</div>
	</div>
	<div class="mb-6">
		<Label for="email" class="mb-2">Email address</Label>
		<Input
			type="email"
			id="email"
			autocomplete="email"
			placeholder="john.doe@company.com"
			required
		/>
	</div>
	<div class="mb-6">
		<Label for="password" class="mb-2">Password</Label>
		<Input
			type="password"
			name="password"
			autocomplete="new-password"
			id="password"
			placeholder="•••••••••"
			required
		/>
	</div>
	<div class="mb-6">
		<Label for="confirm_password" class="mb-2">Confirm password</Label>
		<Input
			type="password"
			id="confirm_password"
			name="confirm_password"
			autocomplete="new-password"
			placeholder="•••••••••"
			required
		/>
	</div>
	<Checkbox classLabel="mb-6 space-x-1 rtl:space-x-reverse" required>
		I agree with the <A href="/" class="text-primary-700 dark:text-primary-600 hover:underline"
			>terms and conditions</A
		>.
	</Checkbox>
	<Button type="submit">Submit</Button>
</form>

Group

Small additional text

Default additional text

.com

Large additional text

.com

Grouped with button

Crazy example

http://

<script lang="ts">
	import { ButtonGroup, Input, InputAddon, Label, Button, Checkbox } from 'svelte-5-ui-lib';
</script>

<div>
	<Label class="mb-2" for="input-addon-sm">Small additional text</Label>
	<ButtonGroup class="w-full" size="sm">
		<InputAddon>@</InputAddon>
		<Input id="input-addon-sm" type="email" placeholder="Your name" />
	</ButtonGroup>
</div>

<div>
	<Label class="mb-2" for="input-addon-md">Default additional text</Label>
	<ButtonGroup class="w-full" size="md">
		<Input id="input-addon-md" type="email" placeholder="Your name" />
		<InputAddon>.com</InputAddon>
	</ButtonGroup>
</div>

<div>
	<Label class="mb-2" for="input-addon-lg">Large additional text</Label>
	<ButtonGroup class="w-full" size="lg">
		<InputAddon>@</InputAddon>
		<Input id="input-addon-lg" type="email" placeholder="Your name" />
		<InputAddon>.com</InputAddon>
	</ButtonGroup>
</div>

<div class="pt-8">
	<Label for="input-addon" class="mb-2">Grouped with button</Label>
	<ButtonGroup class="w-full">
		<InputAddon>@</InputAddon>
		<Input id="input-addon" type="email" placeholder="Your name" />
		<Button color="primary">Search</Button>
	</ButtonGroup>
</div>

<div>
	<Label for="input-addon" class="mb-2">Crazy example</Label>
	<ButtonGroup class="w-full">
		<InputAddon><Checkbox /></InputAddon>
		<Button color="primary">Search</Button>
		<InputAddon>http://</InputAddon>
		<Input id="input-addon" type="email" placeholder="Your name" />
		<InputAddon><Checkbox /></InputAddon>
		<Button color="blue">Send</Button>
	</ButtonGroup>
</div>

Icon

Small input - left icon

Default input - right icon

Large input - both icons

<script lang="ts">
	import { Input, Label, CloseButton } from 'svelte-5-ui-lib';
	import { EnvelopeSolid } from 'flowbite-svelte-icons';
</script>

<Label class="mb-4 space-y-2">
	<span>Small input - left icon</span>
	<Input type="email" placeholder="name@flowbite.com" size="sm" class="pl-8">
		{#snippet left()}
			<EnvelopeSolid class="h-4 w-4" />
		{/snippet}
	</Input>
</Label>

<Label class="mb-4 space-y-2">
	<span>Default input - right icon</span>
	<Input type="email" placeholder="name@flowbite.com" size="md">
		{#snippet right()}
			<EnvelopeSolid class="h-5 w-5" />
		{/snippet}
	</Input>
</Label>

<Label class="space-y-2">
	<span>Large input - both icons</span>
	<Input type="email" placeholder="name@flowbite.com" size="lg" class="pl-10">
		{#snippet left()}
			<EnvelopeSolid class="h-6 w-6" />
		{/snippet}
		{#snippet right()}
			<CloseButton />
		{/snippet}
	</Input>
</Label>

Number

Your lucky number

Value: 5

Type of value: number

<script lang="ts">
	import { Input, Label } from 'svelte-5-ui-lib';
	let value = $state(5);
</script>

<Label class="mb-4 space-y-2">
	<span>Your lucky number</span>
	<Input type="number" bind:value />
</Label>

<p>Value: {value}</p>
<p>Type of value: {typeof value}</p>

Search

<script lang="ts">
	import { Input, Label, Button } from 'svelte-5-ui-lib';
	import { SearchOutline } from 'flowbite-svelte-icons';
</script>

<form>
	<Label for="search" class="mb-2 block">Your Email</Label>
	<Input id="search" placeholder="Search" size="lg" class="pl-10">
		{#snippet left()}
			<SearchOutline class="h-6 w-6 text-gray-500 dark:text-gray-400" />
		{/snippet}
		{#snippet right()}
			<Button size="sm" type="submit">Search</Button>
		{/snippet}
	</Input>
</form>

Clearable

<script lang="ts">
	import { Input } from 'svelte-5-ui-lib';
</script>

<Input clearable placeholder="Clearable input" />

Advanced usage

Your lucky number:

<script lang="ts">
	import { Input, Helper } from 'svelte-5-ui-lib';
	let value = $state();
</script>

<Input placeholder="Your lucky number">
	{#snippet children(prop)}
		<input type="number" bind:value {...prop} />
	{/snippet}
</Input>
<Helper class="mt-2">Your lucky number: {value}</Helper>