Input

Input is one of the main form elements.

Installation

pnpm dlx dreamy add input

Usage

<Input placeholder="Enter your username" />

Input Size

<VStack w="full">
	<Input placeholder="Enter your username" size="sm" />
	<Input placeholder="Enter your username" size="md" />
	<Input placeholder="Enter your username" size="lg" />
	<Input placeholder="Enter your username" size="xl" />
	<Input placeholder="Enter your username" size="2xl" />
</VStack>

Input Variant

<VStack w="full">
	<Input placeholder="Enter your username" variant="outline" />
	<Input placeholder="Enter your username" variant="filled" />
	<Input placeholder="Enter your username" variant="flushed" />
	<Input placeholder="Enter your username" variant="filledOutline" />
</VStack>

Invalid

Pass isInvalid prop to the Input to show the error state.

<VStack w="full">
	<Input placeholder="Enter your username" variant="outline" isInvalid />
	<Input placeholder="Enter your username" variant="filled" isInvalid />
	<Input placeholder="Enter your username" variant="flushed" isInvalid />
	<Input placeholder="Enter your username" variant="filledOutline" isInvalid />
</VStack>

Input Group

Combine Input with Input.Group to attach prefix/suffix segments or place icons inside the field.

Input.Prefix / Input.Suffix — attached segments joined to the input border (e.g. $, https://, .com)
Input.StartAddon / Input.EndAddon — content positioned inside the field (e.g. search icon)

Due to specificity of the Input component, space for addons won't be added automatically, so you will need to add padding on the inline start (ps) or end (pe) side of the Input to make space for Input.StartAddon or Input.EndAddon.

https://

.com

<Input.Group>
	<Input.StartAddon>
		<Icon as={<BiSearch />} boxSize="5" color="fg.medium" />
	</Input.StartAddon>
	<Input ps="10" placeholder="Search for..." />
</Input.Group>	
 
<Input.Group>
	<Input.Prefix>$</Input.Prefix>
	<Input placeholder="Product Price" />
</Input.Group>
 
<Input.Group>
	<Input.Prefix>https://</Input.Prefix>
	<Input placeholder="Domain" />
	<Input.Suffix>.com</Input.Suffix>
</Input.Group>

#

Usage with Field

Combine Input with Field to create a nice looking form element.

Username

Username should not contain special characters.

<Field.Root>
	<Field.Label>Username</Field.Label>
	<Input placeholder="Enter your username" />
	<Field.Hint>Username should not contain special characters.</Field.Hint>
</Field.Root>

Image

Kbd