Color Schemes for Input
are not implemented in the default theme. You can extend the theme to implement them.
Input
The Input
component is a component that is used to get user input in a text
field.
Import#
import { Input } from "@chakra-ui/react"
Usage#
Here's a basic usage example of the Input
component:
<Input placeholder="Basic usage" />
<Input placeholder="Basic usage" />
Changing the size of the Input#
The Input
component comes in four sizes. The default is md
.
xs
(24px
)sm
(32px
)md
(40px
)lg
(48px
)
<DarkMode><Stack spacing={3}><Input placeholder="extra small size" size="xs" borderColor="gray.700" /><Input placeholder="small size" size="sm" borderColor="gray.700" /><Input placeholder="medium size" size="md" borderColor="gray.700" /><Input placeholder="large size" size="lg" borderColor="gray.700" /></Stack></DarkMode>
<Stack spacing={3}><Input placeholder="extra small size" size="xs" /><Input placeholder="small size" size="sm" /><Input placeholder="medium size" size="md" /><Input placeholder="large size" size="lg" /></Stack>
Changing the appearance of the input#
The input component comes in 4 variants: outline
, unstyled
, flushed
, and
filled
. Pass the variant
prop and set it to one of these values.
<DarkMode><Stack spacing={3}><Input variant="outline" placeholder="Outline" borderColor="gray.700" /><Input variant="filled" placeholder="Filled" borderColor="gray.700" /><Input variant="flushed" placeholder="Flushed" borderColor="gray.700" /><Input variant="unstyled" placeholder="Unstyled" borderColor="gray.700" /></Stack></DarkMode>
<Stack spacing={3}><Input variant="outline" placeholder="Outline" /><Input variant="filled" placeholder="Filled" /><Input variant="flushed" placeholder="Flushed" /><Input variant="unstyled" placeholder="Unstyled" /></Stack>
Left and Right Addons#
Like bootstrap, you can add addons to the left and right of the Input
component. Chakra UI exports InputGroup
, InputLeftAddon
, and
InputRightAddon
to help with this use case.
<DarkMode><Stack spacing={4}><InputGroup borderColor="gray.700"><InputLeftAddon children="+234" /><Input type="tel" placeholder="phone number" /></InputGroup>{/* If you add the size prop to `InputGroup`, it'll pass it to all its children. */}<InputGroup size="sm" borderColor="gray.700"><InputLeftAddon children="https://" /><Input placeholder="mysite" /><InputRightAddon children=".com" /></InputGroup></Stack></DarkMode>
<Stack spacing={4}><InputGroup><InputLeftAddon children="+234" /><Input type="tel" placeholder="phone number" /></InputGroup>{/* If you add the size prop to `InputGroup`, it'll pass it to all its children. */}<InputGroup size="sm"><InputLeftAddon children="https://" /><Input placeholder="mysite" /><InputRightAddon children=".com" /></InputGroup></Stack>
Add elements inside Input#
In some scenarios, you might need to add an icon or button inside the input
component. Chakra UI exports InputLeftElement
and InputRightElement
to help
with this use case.
If the left or right is an icon or text, you can pass pointerEvents="none"
to
InputLeftElement
or InputRightElement
to ensure that clicking on them
focused the input.
<DarkMode><Stack spacing={4}><InputGroup borderColor="gray.700"><InputLeftElementpointerEvents="none"children={<PhoneIcon color="gray.300" />}/><Input type="tel" placeholder="Phone number" /></InputGroup><InputGroup borderColor="gray.700"><InputLeftElementpointerEvents="none"color="gray.300"fontSize="1.2em"children="$"/><Input placeholder="Enter amount" /><InputRightElement children={<CheckIcon color="green.500" />} /></InputGroup></Stack></DarkMode>
<Stack spacing={4}><InputGroup><InputLeftElementpointerEvents="none"children={<PhoneIcon color="gray.300" />}/><Input type="tel" placeholder="Phone number" /></InputGroup><InputGroup><InputLeftElementpointerEvents="none"color="gray.300"fontSize="1.2em"children="$"/><Input placeholder="Enter amount" /><InputRightElement children={<CheckIcon color="green.500" />} /></InputGroup></Stack>
Password Input Example#
Let's use these components to create a password input with a show/hide password functionality:
function PasswordInput() {const [show, setShow] = React.useState(false)const handleClick = () => setShow(!show)return (<DarkMode><InputGroup size="md" borderColor="gray.700"><Inputpr="4.5rem"type={show ? "text" : "password"}placeholder="Enter password"/><InputRightElement width="4.5rem"><Button h="1.75rem" size="sm" onClick={handleClick}>{show ? "Hide" : "Show"}</Button></InputRightElement></InputGroup></DarkMode>)}
function PasswordInput() {const [show, setShow] = React.useState(false)const handleClick = () => setShow(!show)return (<InputGroup size="md"><Inputpr="4.5rem"type={show ? "text" : "password"}placeholder="Enter password"/><InputRightElement width="4.5rem"><Button h="1.75rem" size="sm" onClick={handleClick}>{show ? "Hide" : "Show"}</Button></InputRightElement></InputGroup>)}
Controlled Input#
function Example() {const [value, setValue] = React.useState("")const handleChange = (event) => setValue(event.target.value)return (<><DarkMode><Text mb="8px">Value: {value}</Text><Inputvalue={value}onChange={handleChange}placeholder="Here is a sample placeholder"size="sm"borderColor="gray.700"/></DarkMode></>)}
function Example() {const [value, setValue] = React.useState("")const handleChange = (event) => setValue(event.target.value)return (<><Text mb="8px">Value: {value}</Text><Inputvalue={value}onChange={handleChange}placeholder="Here is a sample placeholder"size="sm"/></>)}
Changing the focus and error border colors#
You can change the border color that shows when the input receives focus
(focusBorderColor
) and when isInvalid
is set to true
(errorBorderColor
).
The value can be set to a color in the theme object, like teal.400
, or a raw
CSS value.
<DarkMode><Stack spacing={3}><InputfocusBorderColor="lime"placeholder="Here is a sample placeholder"borderColor="gray.700"/><InputborderColor="gray.700"focusBorderColor="pink.400"placeholder="Here is a sample placeholder"/><InputborderColor="gray.700"isInvaliderrorBorderColor="red.300"placeholder="Here is a sample placeholder"/><InputborderColor="gray.700"isInvaliderrorBorderColor="crimson"placeholder="Here is a sample placeholder"/></Stack></DarkMode>
<Stack spacing={3}><Input focusBorderColor="lime" placeholder="Here is a sample placeholder" /><InputfocusBorderColor="pink.400"placeholder="Here is a sample placeholder"/><InputisInvaliderrorBorderColor="red.300"placeholder="Here is a sample placeholder"/><InputisInvaliderrorBorderColor="crimson"placeholder="Here is a sample placeholder"/></Stack>
Props#
The Input
component composes
Box so you can pass all
Box
props, and React.InputHTMLAttributes
.
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
errorBorderColor
errorBorderColor
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
string
focusBorderColor
focusBorderColor
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
string
isDisabled
isDisabled
If true
, the form control will be disabled. This has 2 side effects:
- The FormLabel
will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled
boolean
isFullWidth
isFullWidth
If true
, the input element will span the full width of its parent
@deprecated This component defaults to 100% width,
please use the props maxWidth
or width
to configure
boolean
isInvalid
isInvalid
If true
, the form control will be invalid. This has 2 side effects:
- The FormLabel
and FormErrorIcon
will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true
boolean
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
isRequired
isRequired
If true
, the form control will be required. This has 2 side effects:
- The FormLabel
will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
boolean
size
size
"sm" | "md" | "lg" | "xs"
"md"
variant
variant
"outline" | "unstyled" | "filled" | "flushed"
"outline"
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web