Input - Dreamy UI

Input

Input is one of the main form elements.

#

Import

Input - The Input component.
InputRSC - The Input component for RSC usage without client handlers.

import { Input } from "@dreamy-ui/react";
import { InputRSC } from "@dreamy-ui/react/rsc";

#

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" />
</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" />
</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 />
</VStack>

#

Input Group

Combine Input with InputGroup to create a add elements on the left or right side of the input.

Due to specificity of the Input component, space for addons won't be added automatically, so you will need to add padding left (pl) or right (pr) to the Input to make space for the addons.

<InputGroup variant="filled">
	<InputLeftAddon>
		<Icon as={BiSearch} boxSize="5" />
	</InputLeftAddon>
	<Input pl="10" placeholder="Search for..." />
</InputGroup>

#

Usage with Field

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

Username

Username should not contain special characters.

<Field>
	<FieldLabel>Username</FieldLabel>
	<Input placeholder="Enter your username" />
	<FieldHelpText>Username should not contain special characters.</FieldHelpText>
</Field>

#

RSC Usage

InputRSC is a RSC compatible component that does not use client handlers.

<InputRSC placeholder="Enter your username" />