pnpm dlx dreamy add input<Input placeholder="Enter your username" /><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> <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>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>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.
$
https://
.com
<InputGroup>
<InputLeftAddon>
<Icon as={<BiSearch />} boxSize="5" color="fg.medium" />
</InputLeftAddon>
<Input pl="10" placeholder="Search for..." />
</InputGroup>
<InputGroup leftElement={"$"}>
<Input placeholder="Product Price" />
</InputGroup>
<InputGroup rightElement={".com"} leftElement={"https://"}>
<Input placeholder="Domain" />
</InputGroup> Combine Input with Field to create a nice looking form element.
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>