Input

A text input component with support for variants, sizes, addons, and element decorations.

Anatomy

<script>
  import {
    Input,
    InputAddon,
    InputGroup,
    InputElement,
  } from "@saas-ui/svelte/components/input";
</script>

<Input placeholder="Enter text..." variant="outline" size="md" />

<!-- With addons and elements -->
<Input.Group>
  <Input.Addon>https://</Input.Addon>
  <Input placeholder="example.com" />
  <Input.Element placement="right">
    <Icon as={SearchIcon} />
  </Input.Element>
</Input.Group>

Examples

Basic Accessibility

Basic input with default styling.

<Input placeholder="Enter text..." />

Colours Accessibility

Use the colour prop to change the colour of the input.

<Stack gap={4} class="max-w-sm">
	{#each colours as colour}
		<HStack align="center" gap={4}>
			<Text size="xs" class="min-w-[8ch] capitalize">{colour}</Text>
			<Input
				{colour}
				placeholder="Focus to see {colour} ring"
				class="flex-1"
			/>
		</HStack>
	{/each}
</Stack>

Disabled Accessibility

Use the disabled prop to disable the input.

<Stack class="max-w-sm">
	<Input disabled placeholder="Disabled input" />
</Stack>

Input With Placeholder Style Accessibility

Input with custom placeholder styling.

<Stack class="max-w-sm">
	<Input
		colour="teal"
		placeholder="custom placeholder"
		class="text-(--c-fg) placeholder:text-inherit"
	/>
</Stack>

Left And Right Element Accessibility

Input with both left and right Input.Element components.

<HStack gap={4} class="w-full">
	<Input.Group class="flex-1">
		<Input.Element placement="left">
			<Icon as={MagnifyingGlass} size="xs" />
		</Input.Element>
		<Input placeholder="Search contacts" class="px-8" />
		<Input.Element placement="right" class="pointer-events-auto">
			<Kbd>⌘K</Kbd>
		</Input.Element>
	</Input.Group>

	<Input.Group class="flex-1">
		<Input.Element placement="left">https://</Input.Element>
		<Input placeholder="yoursite.com" class="pl-16" />
	</Input.Group>
</HStack>

Left Element Accessibility

Input with a left Input.Element (icon or text).

<HStack gap={4} class="w-full">
	<Input.Group class="flex-1">
		<Input.Element placement="left">
			<Icon as={User} size="xs" />
		</Input.Element>
		<Input placeholder="Username" class="pl-8" />
	</Input.Group>

	<Input.Group class="flex-1">
		<Input.Element placement="left">https://</Input.Element>
		<Input placeholder="yoursite.com" class="pl-16" />
	</Input.Group>
</HStack>

Sizes Accessibility

Use the size prop to change the size of the input. Available sizes: xs, sm, md, lg.

<Stack gap={4} class="max-w-md">
	{#each inputSizes as size}
		<HStack align="center" gap={4}>
			<Text size="xs" class="min-w-[3ch]">{size}</Text>
			<Input {size} placeholder="Placeholder" class="flex-1" />
		</HStack>
	{/each}
</Stack>

Variants Accessibility

Use the variant prop to change the visual style of the input. Available variants: outline, subtle, flushed.

<Stack gap={4} class="max-w-md">
	{#each inputVariants as variant}
		<HStack align="center" gap={4}>
			<Text size="xs" class="min-w-[8ch]">{variant}</Text>
			<Input {variant} placeholder="Placeholder" class="flex-1" />
		</HStack>
	{/each}
</Stack>

With Addons Accessibility

Input with Input.Addon elements.

<Stack gap={4} class="max-w-sm">
	<Group attached>
		<Input.Addon>https://</Input.Addon>
		<Input placeholder="website.com" class="-ml-px focus-visible:z-1" />
	</Group>

	<Group attached>
		<Input placeholder="jdoe" class="-mr-px focus-visible:z-1" />
		<Input.Addon>@gmail.com</Input.Addon>
	</Group>
</Stack>

Props

Prop	Type	Default	Description
`variant`	`outline \| subtle \| flushed`	`solid`	The visual style of the component.
`size`	`xs \| sm \| md \| lg`	`md`	The size of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`invalid`	`boolean`	`false`	Whether the component is in an invalid state.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`placeholder`	`text`	-	-
`class`	`text`	-	Additional CSS classes to apply.