Documentation for all components in Chakra UI v3.
# Accordion
```tsx
import { Accordion, Span } from "@chakra-ui/react"
export const AccordionBasic = () => {
return (
{items.map((item, index) => (
{item.title}{item.text}
))}
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
```
## Usage
```tsx
import { Accordion } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Controlled
Set the accordion that shows up by default.
```tsx
"use client"
import { Accordion, Span, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"
export const AccordionControlled = () => {
const [value, setValue] = useState(["second-item"])
return (
Expanded: {value.join(", ")} setValue(e.value)}>
{items.map((item, index) => (
{item.title}{item.text}
))}
)
}
const items = [
{ value: "first-item", title: "First Item", text: "Some value 1..." },
{ value: "second-item", title: "Second Item", text: "Some value 2..." },
{ value: "third-item", title: "Third Item", text: "Some value 3..." },
]
```
### With Icon
Here's an example of rendering a custom icon in each accordion item.
```tsx
import { Accordion, Heading, Icon, Stack } from "@chakra-ui/react"
import { LuChartBarStacked, LuTags } from "react-icons/lu"
export const AccordionWithIcon = () => {
return (
Product details
{items.map((item) => (
{item.icon}
{item.title}
{item.content}
))}
)
}
const items = [
{
value: "info",
icon: ,
title: "Product Info",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.",
},
{
value: "stats",
icon: ,
title: "Stats",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.",
},
]
```
### Expand Multiple Items
Use the `multiple` prop to allow multiple items to be expanded at once.
```tsx
import { Accordion, Span } from "@chakra-ui/react"
export const AccordionWithMultiple = () => {
return (
{items.map((item, index) => (
{item.title}{item.text}
))}
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
```
### Sizes
Use the `size` prop to change the size of the accordion.
```tsx
import { Accordion, For, Span, Stack, Text } from "@chakra-ui/react"
export const AccordionSizes = () => {
return (
{(size) => (
{size}
{items.map((item, index) => (
{item.title}{item.text}
))}
)}
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
```
### Variants
Use the `variant` prop to change the visual style of the accordion. Values can
be either `outline`, `subtle`, `enclosed` or `plain`.
```tsx
import { Accordion, For, Span, Stack, Text } from "@chakra-ui/react"
export const AccordionVariants = () => {
return (
{(variant) => (
{variant}
{items.map((item, index) => (
{item.title}{item.text}
))}
)}
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
```
### Disabled Item
Pass the `disabled` prop to any `Accordion.Item` to prevent it from being
expanded or collapsed.
```tsx
import { Accordion, Span } from "@chakra-ui/react"
export const AccordionWithDisabledItem = () => {
return (
{items.map((item, index) => (
{item.title}{item.text}
))}
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3...", disabled: true },
]
```
### With Avatar
Here's an example of composing an accordion with an avatar.
```tsx
import { Accordion, Avatar, Badge, HStack } from "@chakra-ui/react"
import { LuTrophy } from "react-icons/lu"
import { LoremIpsum } from "react-lorem-ipsum"
export const AccordionWithAvatar = () => {
return (
{items.map((item, index) => (
{item.name}{" "}
{item.topRated && (
Top Rated
)}
{item.bio}
))}
)
}
const items = [
{
name: "Alex",
bio: ,
image: "https://i.pravatar.cc/150?u=a",
topRated: false,
},
{
name: "Benji",
bio: ,
image: "https://i.pravatar.cc/150?u=b",
topRated: true,
},
{
name: "Charlie",
bio: ,
image: "https://i.pravatar.cc/150?u=c",
topRated: false,
},
]
```
### With Subtext
Here's an example of adding a subtext to an accordion item.
```tsx
import { Accordion, Stack, Text } from "@chakra-ui/react"
import { LoremIpsum } from "react-lorem-ipsum"
const items = [
{ value: "a", title: "First Item", text: },
{ value: "b", title: "Second Item", text: },
{ value: "c", title: "Third Item", text: },
]
export const AccordionWithSubtext = () => {
return (
{items.map((item, index) => (
{item.title}
Click to expand
{item.text}
))}
)
}
```
### With Actions
Here's an example of adding actions to an accordion item trigger.
```tsx
import { AbsoluteCenter, Accordion, Box, Button, Span } from "@chakra-ui/react"
import LoremIpsum from "react-lorem-ipsum"
export const AccordionWithActions = () => {
return (
{items.map((item, index) => (
{item.title}{item.text}
))}
)
}
const items = [
{ value: "a", title: "First Item", text: },
{ value: "b", title: "Second Item", text: },
{ value: "c", title: "Third Item", text: },
]
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| collapsible | false | `boolean` | Whether an accordion item can be closed after it has been expanded. |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| multiple | false | `boolean` | Whether multiple accordion items can be expanded at the same time. |
| orientation | "vertical" | `'horizontal' \| 'vertical'` | The orientation of the accordion items. |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | outline | `'outline' \| 'subtle' \| 'enclosed' \| 'plain'` | The variant of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| defaultValue | undefined | `string[]` | The initial value of the accordion when it is first rendered.
Use when you do not need to control the state of the accordion. |
| disabled | undefined | `boolean` | Whether the accordion items are disabled |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n root: string\n item(value: string): string\n itemContent(value: string): string\n itemTrigger(value: string): string\n}>` | The ids of the elements in the accordion. Useful for composition. |
| onFocusChange | undefined | `(details: FocusChangeDetails) => void` | The callback fired when the focused accordion item changes. |
| onValueChange | undefined | `(details: ValueChangeDetails) => void` | The callback fired when the state of expanded/collapsed accordion items changes. |
| value | undefined | `string[]` | The `value` of the accordion items that are currently being expanded. |
### Item
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | undefined | `string` | The value of the accordion item. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| disabled | undefined | `boolean` | Whether the accordion item is disabled. |
# Action Bar
```tsx
"use client"
import { ActionBar, Button, Checkbox, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"
export const ActionBarBasic = () => {
const [checked, setChecked] = useState(false)
return (
<>
setChecked(!!e.checked)}>
Show Action bar
2 selected
)
}
```
## Usage
The action bar is designed to be controlled by table or checkbox selections. It
provides a set of actions that can be performed on the selected items.
```tsx
import { ActionBar } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Close Trigger
Render the `ActionBar.CloseTrigger` to close the action bar, and pass the
`onOpenChange` handler to control the visibility of the action bar.
> The `open` and `onOpenChange` props control the visibility of the action bar.
```tsx
"use client"
import {
ActionBar,
Button,
Checkbox,
CloseButton,
Portal,
} from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"
export const ActionBarWithCloseTrigger = () => {
const [checked, setChecked] = useState(false)
return (
<>
setChecked(!!e.checked)}
>
Show Action bar setChecked(e.open)}
closeOnInteractOutside={false}
>
2 selected
)
}
```
### Within Dialog
Here's an example of composing the `ActionBar` and the `Dialog` to perform a
delete action on a set of selected items.
> Press the `Delete projects` button to open the dialog.
```tsx
"use client"
import { ActionBar, Button, Checkbox, Dialog, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuSquarePlus, LuTrash2 } from "react-icons/lu"
export const ActionBarWithDialog = () => {
const [checked, setChecked] = useState(false)
return (
<>
setChecked(!!e.checked)}>
Check to select projects
4 selected
Delete projects
Are you sure you want to delete 4 projects?
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| autoFocus | true | `boolean` | Whether to automatically set focus on the first focusable
content within the popover when opened. |
| closeOnEscape | true | `boolean` | Whether to close the popover when the escape key is pressed. |
| closeOnInteractOutside | true | `boolean` | Whether to close the popover when the user clicks outside of the popover. |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| modal | false | `boolean` | Whether the popover should be modal. When set to `true`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover |
| portalled | true | `boolean` | Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
of the popover content. |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| defaultOpen | undefined | `boolean` | The initial open state of the popover when it is first rendered.
Use when you do not need to control its open state. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n anchor: string\n trigger: string\n content: string\n title: string\n description: string\n closeTrigger: string\n positioner: string\n arrow: string\n}>` | The ids of the elements in the popover. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| initialFocusEl | undefined | `() => HTMLElement \| null` | The element to focus on when the popover is opened. |
| onEscapeKeyDown | undefined | `(event: KeyboardEvent) => void` | Function called when the escape key is pressed |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Function invoked when the popover opens or closes |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| open | undefined | `boolean` | Whether the popover is open |
| persistentElements | undefined | `(() => Element \| null)[]` | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event |
| positioning | undefined | `PositioningOptions` | The user provided options used to position the popover content |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Alert
```tsx
import { Alert } from "@chakra-ui/react"
export const AlertBasic = () => {
return (
This is the alert title
)
}
```
## Usage
```jsx
import { Alert } from "@chakra-ui/react"
```
```jsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Description
Render the `Alert.Description` component to provide additional context to the
alert.
```tsx
import { Alert } from "@chakra-ui/react"
export const AlertWithDescription = () => {
return (
Invalid Fields
Your form has some errors. Please fix them and try again.
)
}
```
### Status
Change the status of the alerts by passing the `status` prop. This affects the
color scheme and icon used. Alert supports `error`, `success`, `warning`, and
`info` statuses.
```tsx
import { Alert, Stack } from "@chakra-ui/react"
export const AlertWithStatus = () => {
return (
There was an error processing your request
Chakra is going live on August 30th. Get ready!
Seems your account is about expire, upgrade now
Data uploaded to the server. Fire on!
)
}
```
### Variants
Use the `variant` prop to change the visual style of the alert. Values can be
either `subtle`, `solid`, `outline`
```tsx
import { Alert, Stack } from "@chakra-ui/react"
export const AlertWithVariants = () => {
return (
Data uploaded to the server. Fire on!Data uploaded to the server. Fire on!Data uploaded to the server. Fire on!
)
}
```
### With Close Button
Here's and example of how to compose the `Alert` with a close button.
```tsx
import { Alert, CloseButton } from "@chakra-ui/react"
export const AlertWithCloseButton = () => {
return (
Success!
Your application has been received. We will review your application
and respond within the next 48 hours.
)
}
```
### With Spinner
Here's and example of how to compose the `Alert` with a spinner.
```tsx
import { Alert, Spinner } from "@chakra-ui/react"
export const AlertWithSpinner = () => {
return (
We are loading something
)
}
```
### Custom Icon
Use the `icon` prop to pass a custom icon to the alert. This will override the
default icon for the alert status.
```tsx
import { Alert } from "@chakra-ui/react"
import { LuAlarmClockPlus } from "react-icons/lu"
export const AlertWithCustomIcon = () => {
return (
Submitting this form will delete your account
)
}
```
### Color Palette Override
The default colorPalette is inferred from the `status` prop. To override the
color palette, pass the `colorPalette` prop.
```tsx
import { Alert } from "@chakra-ui/react"
export const AlertWithColorPaletteOverride = () => {
return (
This is an info alert but shown as teal
)
}
```
### Customization
You can style the `Alert` component using style props.
```tsx
import { Alert, Link, Stack } from "@chakra-ui/react"
import { LuPercent } from "react-icons/lu"
export const AlertWithCustomization = () => {
return (
Black Friday Sale (20% off)
Upgrade your plan to get access to the sale.
Upgrade
Heads up: Black Friday Sale (20% off)
)
}
```
### Closed Component
Here's how to setup the `Alert` for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add alert
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| status | info | `'info' \| 'warning' \| 'success' \| 'error' \| 'neutral'` | The status of the component |
| variant | subtle | `'subtle' \| 'surface' \| 'outline' \| 'solid'` | The variant of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| inline | false | `'true' \| 'false'` | The inline of the component |
# Aspect Ratio
```tsx
import { AspectRatio, Center } from "@chakra-ui/react"
export const AspectRatioBasic = () => {
return (
2 / 1
)
}
```
## Usage
```jsx
import { AspectRatio } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Image
Here's how to embed an image that has a 4 by 3 aspect ratio.
```tsx
import { AspectRatio, Image } from "@chakra-ui/react"
export const AspectRatioWithImage = () => {
return (
)
}
```
### Video
To embed a video with a specific aspect ratio, use an iframe with `src` pointing
to the link of the video.
```tsx
import { AspectRatio } from "@chakra-ui/react"
export const AspectRatioWithVideo = () => {
return (
)
}
```
### Google Map
Here's how to embed a responsive Google map using `AspectRatio`.
```tsx
import { AspectRatio } from "@chakra-ui/react"
export const AspectRatioWithMap = () => {
return (
)
}
```
### Responsive
Here's an example of applying a responsive aspect ratio to a box.
```tsx
import { AspectRatio } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const AspectRatioResponsive = () => (
Box
)
```
## Props
These props can be passed to the `AspectRatio` component.
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| ratio | undefined | `ConditionalValue` | The aspect ratio of the Box. Common values are:
`21/9`, `16/9`, `9/16`, `4/3`, `1.85/1` |
# Avatar
```tsx
import { Avatar } from "@chakra-ui/react"
export const AvatarBasic = () => {
return (
)
}
```
## Usage
```tsx
import { Avatar, AvatarGroup } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Use the `size` prop to change the size of the avatar
```tsx
import { Avatar, For, HStack } from "@chakra-ui/react"
export const AvatarWithSizes = () => {
return (
{(size) => (
)}
)
}
```
### Variants
Use the `variant` prop to change the variant of the avatar
```tsx
import { Avatar, For, HStack } from "@chakra-ui/react"
export const AvatarWithVariants = () => {
return (
{(variant) => (
)}
)
}
```
### Shape
Use the `shape` prop to change the shape of the avatar, from `rounded` to
`square`
```tsx
import { Avatar, HStack } from "@chakra-ui/react"
export const AvatarWithShape = () => {
return (
)
}
```
### Colors
Use the `colorPalette` prop to change the color of the avatar
```tsx
import { Avatar, Stack, Text } from "@chakra-ui/react"
export const AvatarWithColors = () => {
return (
{["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
{colorPalette}
))}
)
}
```
### Fallback
Render `Avatar.Icon` as the fallback when the name is not provided or when the
image fails to load.
```tsx
import { Avatar, HStack } from "@chakra-ui/react"
export const AvatarWithFallback = () => {
return (
)
}
```
### Random Color
Combine the `colorPalette` prop with some custom logic to dynamically change the
color of the avatar
```tsx
import { Avatar, HStack } from "@chakra-ui/react"
const colorPalette = ["red", "blue", "green", "yellow", "purple", "orange"]
const pickPalette = (name: string) => {
const index = name.charCodeAt(0) % colorPalette.length
return colorPalette[index]
}
export const AvatarWithRandomColor = () => {
return (
)
}
```
### Ring
Use the `outline*` props to add a ring around the avatar
```tsx
import { Avatar, HStack, defineStyle } from "@chakra-ui/react"
const ringCss = defineStyle({
outlineWidth: "2px",
outlineColor: "colorPalette.500",
outlineOffset: "2px",
outlineStyle: "solid",
})
export const AvatarWithRing = () => {
return (
)
}
```
### Group
Use the `Group` component to group multiple avatars together
```tsx
import { Avatar, AvatarGroup } from "@chakra-ui/react"
export const AvatarWithGroup = () => {
return (
+3
)
}
```
### Stacking
When using the `AvatarGroup` component, you can use the `stacking` prop to
change the stacking order of the avatars
```tsx
import { Avatar, AvatarGroup, Stack } from "@chakra-ui/react"
export const AvatarGroupWithStacking = () => {
return (
{items.map((item) => (
))}
+3
{items.map((item) => (
))}
+3
{items.map((item) => (
))}
+3
)
}
const items = [
{
src: "https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd",
name: "Uchiha Sasuke",
},
{
src: "https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c",
name: "Baki Ani",
},
{
src: "https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863",
name: "Uchiha Chan",
},
]
```
### Persona
Here's an example of how to use the `Avatar` component to display a user
persona.
```tsx
import { Avatar, HStack, Stack, Text } from "@chakra-ui/react"
export const AvatarPersona = () => {
return (
{users.map((user) => (
{user.name}
{user.email}
))}
)
}
const users = [
{
id: "1",
name: "John Mason",
email: "john.mason@example.com",
avatar: "https://i.pravatar.cc/300?u=iu",
},
{
id: "2",
name: "Melissa Jones",
email: "melissa.jones@example.com",
avatar: "https://i.pravatar.cc/300?u=po",
},
]
```
### Badge
Show a badge on the right corner of the avatar by composing the `Float` and
`Circle` components
```tsx
import { Avatar, Circle, Float } from "@chakra-ui/react"
export const AvatarWithBadge = () => {
return (
)
}
```
### Overflow
Here's an example of how to handle an overflow of avatars by composing the
`Menu` and `Avatar` components.
```tsx
import { Avatar, Group, Menu, Portal } from "@chakra-ui/react"
const names = [
"Naruto Uzumaki",
"Sakura Haruno",
"Kakashi Hatake",
"Hinata Hyuga",
"Shikamaru Nara",
]
const maxAvatars = 3
export const AvatarWithOverflow = () => {
const { items, overflow } = partition(names, maxAvatars)
return (
{items.map((item) => (
))}
{overflow.length > 0 && (
+{overflow.length}
{overflow.map((item) => (
{item}
))}
)}
)
}
const colorPalette = ["red", "blue", "green", "yellow", "purple", "orange"]
const pickPalette = (name: string) => {
const index = name.charCodeAt(0) % colorPalette.length
return colorPalette[index]
}
const partition = (arr: string[], max: number) => {
const items = []
const overflow = []
for (const item of arr) {
if (items.length < max) items.push(item)
else overflow.push(item)
}
return { items, overflow }
}
```
### Next.js
Here's an example of how to compose the avatar with Next.js Image.
```tsx
import { getImageProps } from "next/image"
function Demo() {
const imageProps = getImageProps({
src: "/image.png",
})
return (
)
}
```
### Store
An alternative way to access the avatar state and methods is to use the
`RootProvider` component and the `useAvatar` store hook.
```tsx
"use client"
import { Avatar, Code, Stack, useAvatar } from "@chakra-ui/react"
export const AvatarWithStore = () => {
const avatar = useAvatar()
return (
{avatar.loaded ? "loaded" : "not loaded"}
)
}
```
### Closed Component
Here's how to setup the Avatar for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add avatar
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | subtle | `'solid' \| 'subtle' \| 'outline'` | The variant of the component |
| shape | full | `'square' \| 'rounded' \| 'full'` | The shape of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| ids | undefined | `Partial<{ root: string; image: string; fallback: string }>` | The ids of the elements in the avatar. Useful for composition. |
| onStatusChange | undefined | `(details: StatusChangeDetails) => void` | Functional called when the image loading status changes. |
| borderless | undefined | `'true' \| 'false'` | The borderless of the component |
| as | undefined | `React.ElementType` | The underlying element to render. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
### Fallback
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| name | undefined | `string` | undefined |
| icon | undefined | `React.ReactElement` | undefined |
### Image
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
# Badge
```tsx
import { Badge, Stack } from "@chakra-ui/react"
export const BadgeBasic = () => {
return (
DefaultSuccessRemovedNew
)
}
```
## Usage
```jsx
import { Badge } from "@chakra-ui/react"
```
```jsx
Badge
```
## Examples
### Icon
Render an icon within the badge directly
```tsx
import { Badge, Stack } from "@chakra-ui/react"
import { HiAtSymbol, HiStar } from "react-icons/hi"
export const BadgeWithIcon = () => {
return (
New
New
)
}
```
### Variants
Badges come in different variants
```tsx
import { Badge, Stack } from "@chakra-ui/react"
export const BadgeWithVariants = () => {
return (
OutlineSolidSubtleSurface
)
}
```
### Sizes
Badges come in different sizes
```tsx
import { Badge, HStack } from "@chakra-ui/react"
export const BadgeWithSizes = () => {
return (
NewNewNewNew
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | subtle | `'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'` | The variant of the component |
| size | sm | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
# Bleed
```tsx
import { Bleed, Box, Heading, Stack, Text } from "@chakra-ui/react"
export const BleedBasic = () => {
return (
BleedSome HeadingLorem ipsum dolor sit amet, consectetur adipiscing elit.
)
}
```
## Usage
```jsx
import { Bleed } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Vertical
Use the `block` prop to make the element bleed vertically.
```tsx
import { Bleed, Box } from "@chakra-ui/react"
export const BleedVertical = () => {
return (
Bleed
)
}
```
### Specific Direction
Use the `inlineStart`, `inlineEnd`, `blockStart`, and `blockEnd` props to make
the element bleed in a specific direction.
```tsx
import { Bleed, Box, Stack } from "@chakra-ui/react"
export const BleedWithDirection = () => {
return (
inlineStartinlineEndblockStartblockEnd
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| inline | undefined | `SystemStyleObject['marginInline']` | The negative margin on the x-axis |
| block | undefined | `SystemStyleObject['marginBlock']` | The negative margin on the y-axis |
| inlineStart | undefined | `SystemStyleObject['marginInlineStart']` | The negative margin on the inline-start axis |
| inlineEnd | undefined | `SystemStyleObject['marginInlineEnd']` | The negative margin on the inline-end axis |
| blockStart | undefined | `SystemStyleObject['marginBlockStart']` | The negative margin on the block-start axis |
| blockEnd | undefined | `SystemStyleObject['marginBlockEnd']` | The negative margin on the block-end axis |
# Blockquote
```tsx
import { Blockquote } from "@chakra-ui/react"
export const BlockquoteBasic = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
)
}
```
## Usage
```jsx
import { Blockquote } from "@chakra-ui/react"
```
```tsx
Uzumaki Naruto
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### With Cite
To provide reference about the blockquote:
- pass the `cite` prop to `Blockquote.Content` pointing to the quote url
- render the `Blockquote.Caption` component to display name of quote author
```tsx
import { Blockquote } from "@chakra-ui/react"
export const BlockquoteWithCite = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
— Uzumaki Naruto
)
}
```
### Colors
Use the `colorPalette` prop to change the color of the blockquote.
```tsx
import { Blockquote, Stack, Text } from "@chakra-ui/react"
export const BlockquoteWithColors = () => {
return (
{["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
{colorPalette}
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take
pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto
))}
)
}
```
### Variants
Use the `variant` prop to change the visual style of the blockquote.
```tsx
import { Blockquote, Stack } from "@chakra-ui/react"
export const BlockquoteWithVariants = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride
in himself, without comparing himself to anyone else.
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride
in himself, without comparing himself to anyone else.
)
}
```
### Icon
Here's an example of how to compose the `Float` and `BlockquoteIcon` to show an
icon on the blockquote. The default icon is a double quote.
```tsx
import { Blockquote, Float } from "@chakra-ui/react"
export const BlockquoteWithIcon = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
— Uzumaki Naruto
)
}
```
Alternatively, you can render a custom icon.
```tsx
import { Blockquote, Circle, Float } from "@chakra-ui/react"
import { LuQuote } from "react-icons/lu"
export const BlockquoteWithCustomIcon = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
— Uzumaki Naruto
)
}
```
### Justify
Use the `justify` prop to change the alignment of the blockquote.
```tsx
import { Blockquote, For, HStack, Stack, Text } from "@chakra-ui/react"
export const BlockquoteWithJustify = () => {
return (
{(justify) => (
{justify}
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take
pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto
)}
)
}
```
### With Avatar
Here's an example of how to compose the `Blockquote`, `Avatar` and `Float`
components to create a stunning testimonial component.
```tsx
import { Avatar, Blockquote, Float, HStack, Span } from "@chakra-ui/react"
export const BlockquoteWithAvatar = () => {
return (
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
Emily Jones
)
}
```
### Closed Component
Here's an example of how to create a closed component composition
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add blockquote
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| justify | start | `'start' \| 'center' \| 'end'` | The justify of the component |
| variant | subtle | `'subtle' \| 'solid' \| 'plain'` | The variant of the component |
# Box
```tsx
import { Box } from "@chakra-ui/react"
export const BoxBasic = () => {
return (
This is the Box
)
}
```
## Usage
The `Box` component provides an easy way to write styles with ease. It provides
access to design tokens and an unmatched DX when writing responsive styles.
```jsx
import { Box } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Shorthand
Use shorthand like `bg` instead of `backgroundColor`, `m` instead of `margin`,
etc.
```tsx
import { Box } from "@chakra-ui/react"
export const BoxWithShorthand = () => {
return (
This is the Box
)
}
```
### Pseudo Props
Use pseudo props like `_hover` to apply styles on hover, `_focus` to apply
styles on focus, etc.
```tsx
import { Box } from "@chakra-ui/react"
export const BoxWithPseudoProps = () => {
return (
This is the Box
)
}
```
### Border
Use the `borderWidth` and `borderColor` prop to apply border styles.
> **Good to know:** Chakra applies `borderStyle: solid` globally so you don't
> have to.
```tsx
import { Box } from "@chakra-ui/react"
export const BoxWithBorder = () => {
return (
Somewhat disabled box
)
}
```
### As Prop
Use the `as` prop to render a different component.
> Inspect the DOM to see the rendered component.
```tsx
import { Box } from "@chakra-ui/react"
export const BoxWithAsProp = () => {
return (
This is a Box rendered as a section
)
}
```
### Shadow
Use the `boxShadow` or `shadow` prop to apply shadow styles.
```tsx
import { Box } from "@chakra-ui/react"
export const BoxWithShadow = () => {
return (
Box with shadow
)
}
```
### Composition
Here's an example of a property card built with layout primitives in Chakra.
```tsx
import { Badge, Box, HStack, Icon, Image, Text } from "@chakra-ui/react"
import { HiStar } from "react-icons/hi"
export const BoxPropertyCard = () => {
return (
Superhost
{data.rating} ({data.reviewCount})
{data.title}
{data.formattedPrice} • {data.beds} beds
)
}
const data = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$435",
reviewCount: 34,
rating: 4.5,
}
```
## Props
The `Box` component supports all CSS properties as props, making it easy to
style elements.
# Breadcrumb
```tsx
import { Breadcrumb } from "@chakra-ui/react"
export const BreadcrumbBasic = () => {
return (
DocsComponentsProps
)
}
```
## Usage
```tsx
import { Breadcrumb } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Use the `size` prop to change the size of the breadcrumb component
```tsx
import { Breadcrumb, For, Stack } from "@chakra-ui/react"
export const BreadcrumbWithSizes = () => {
return (
{(size) => (
DocsComponentsProps
)}
)
}
```
### Variants
Use the `variant` prop to change the appearance of the breadcrumb component
```tsx
import { Breadcrumb, For, Stack } from "@chakra-ui/react"
export const BreadcrumbWithVariants = () => {
return (
{(variant) => (
DocsComponentsProps
)}
)
}
```
### With Separator
Use the `Breadcrumb.Separator` component to add a custom separator
```tsx
import { Breadcrumb } from "@chakra-ui/react"
import { LiaSlashSolid } from "react-icons/lia"
export const BreadcrumbWithSeparator = () => {
return (
DocsComponentsProps
)
}
```
### Icon
Add a custom icon to the breadcrumb by rendering it within `Breadcrumb.Link`
```tsx
import { Breadcrumb } from "@chakra-ui/react"
import { LuHouse, LuShirt } from "react-icons/lu"
export const BreadcrumbWithIcon = () => {
return (
Home
Men Wear
Trousers
)
}
```
### Menu
Wrap the `Breadcrumb.Link` inside the `MenuTrigger` to ensure it works correctly
within the menu component
```tsx
import { Breadcrumb, Menu, Portal } from "@chakra-ui/react"
import { LuChevronDown } from "react-icons/lu"
interface BreadcrumbMenuItemProps {
children: React.ReactNode
items: Array<{ label: string; value: string }>
}
const BreadcrumbMenuItem = (props: BreadcrumbMenuItemProps) => {
const { children, items } = props
return (
{children}
{items.map((item) => (
{item.label}
))}
)
}
export const BreadcrumbWithMenu = () => {
return (
Docs/
Components
/Props
)
}
```
### Ellipsis
Render the `Breadcrumb.Ellipsis` component to show an ellipsis after a
breadcrumb item
```tsx
import { Breadcrumb } from "@chakra-ui/react"
export const BreadcrumbWithEllipsis = () => {
return (
DocsComponentsProps
)
}
```
### Routing Library
Use the `asChild` prop to change the underlying breadcrumb link
```tsx
import { Breadcrumb } from "@chakra-ui/react"
import { Link } from "next/link"
export const Example = () => {
return (
Docs
)
}
```
### Closed Component
Here's how to setup the Breadcrumb for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add breadcrumb
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | plain | `'underline' \| 'plain'` | The variant of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| separator | undefined | `React.ReactNode` | undefined |
| separatorGap | undefined | `SystemStyleObject['gap']` | undefined |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Button
```tsx
import { Button } from "@chakra-ui/react"
export const ButtonBasic = () => {
return
}
```
## Usage
```jsx
import { Button, ButtonGroup } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the button.
```tsx
import { Button, HStack } from "@chakra-ui/react"
export const ButtonWithSizes = () => {
return (
)
}
```
### Variants
Use the `variant` prop to change the visual style of the Button.
```tsx
import { Button, HStack } from "@chakra-ui/react"
export const ButtonWithVariants = () => {
return (
)
}
```
### Icon
Use icons within a button
```tsx
import { Button, HStack } from "@chakra-ui/react"
import { RiArrowRightLine, RiMailLine } from "react-icons/ri"
export const ButtonWithIcons = () => {
return (
)
}
```
### Color
Use the `colorPalette` prop to change the color of the button
```tsx
import { Button, Stack, Text } from "@chakra-ui/react"
export const ButtonWithColors = () => {
return (
{["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
{colorPalette}
))}
)
}
```
### Disabled
Use the `disabled` prop to disable the button.
```tsx
import { Button } from "@chakra-ui/react"
export const ButtonWithDisabled = () => {
return
}
```
### Disabled Link
When using the `disabled` prop with a link, you need to prevent the default
behavior of the link and add the `data-disabled` attribute.
```tsx
"use client"
import { Button } from "@chakra-ui/react"
export const ButtonWithDisabledLink = () => {
return (
)
}
```
### Loading
Pass the `loading` and `loadingText` props to the `Button` component to show a
loading spinner and add a loading text.
```tsx
import { Button, Stack } from "@chakra-ui/react"
export const ButtonWithLoading = () => {
return (
)
}
```
Here's an example of how to toggle the loading state of a button while keeping
the width of the button the same.
```tsx
"use client"
import { Button, Checkbox, VStack } from "@chakra-ui/react"
import { useState } from "react"
export const ButtonWithLoadingToggle = () => {
const [loading, setLoading] = useState(false)
return (
setLoading(!loading)}
>
Loading
)
}
```
### Spinner Placement
Use the `spinnerPlacement` prop to change the placement of the spinner.
```tsx
import { Button, ButtonGroup } from "@chakra-ui/react"
export const ButtonWithSpinnerPlacement = () => {
return (
)
}
```
### Custom Spinner
Use the `spinner` prop to change the spinner.
```tsx
import { Button } from "@chakra-ui/react"
import { BeatLoader } from "react-spinners"
export const ButtonWithCustomSpinner = () => {
return (
}
>
Click me
)
}
```
### Group
Use the `ButtonGroup` component to group buttons together. This component allows
you pass common recipe properties to inner buttons.
```tsx
import { Button, ButtonGroup } from "@chakra-ui/react"
export const ButtonWithGroup = () => {
return (
)
}
```
To flush the buttons, pass the `attached` prop.
```tsx
import { Button, ButtonGroup, IconButton } from "@chakra-ui/react"
import { LuChevronDown } from "react-icons/lu"
export const ButtonWithGroupFlushed = () => {
return (
)
}
```
### Radius
Use the `rounded` prop to change the radius of the button.
```tsx
import { Button, ButtonGroup, Stack, Text } from "@chakra-ui/react"
export const ButtonWithRadius = () => {
return (
Semantic RadiusCore Radius
)
}
```
### As Link
Use the `asChild` prop to render a button as a link.
```tsx
import { Button } from "@chakra-ui/react"
export const ButtonAsLink = () => {
return (
)
}
```
### Ref
Here's how to access the underlying element reference
```tsx
const Demo = () => {
const ref = useRef(null)
return
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | solid | `'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` | The variant of the component |
| loading | undefined | `boolean` | undefined |
| loadingText | undefined | `React.ReactNode` | undefined |
# Card
```tsx
import { Avatar, Button, Card } from "@chakra-ui/react"
export const CardBasic = () => {
return (
Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
)
}
```
## Usage
```jsx
import { Card } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Variants
Use the `variant` prop to change the visual style of the Card.
```tsx
import { Avatar, Button, Card, For, Stack } from "@chakra-ui/react"
export const CardWithVariants = () => {
return (
{(variant) => (
Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
)}
)
}
```
### Within Form
Use the Card component within a form to group related fields together.
```tsx
import { Button, Card, Field, Input, Stack } from "@chakra-ui/react"
export const CardWithForm = () => (
Sign up
Fill in the form below to create an account
First NameLast Name
)
```
### Sizes
Use the `size` prop to change the size of the Card.
```tsx
import { Card, Heading, Stack } from "@chakra-ui/react"
export const CardWithSizes = () => {
return (
Card - sm
This is the card body. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Card - md
This is the card body. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Card - lg
This is the card body. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
)
}
```
### With Image
Use the Card component to display an image.
```tsx
import { Button, Card, Image, Text } from "@chakra-ui/react"
export const CardWithImage = () => {
return (
Living room Sofa
This sofa is perfect for modern tropical spaces, baroque inspired
spaces.
$450
)
}
```
### Horizontal
Use the Card component to display content horizontally.
```tsx
import { Badge, Box, Button, Card, HStack, Image } from "@chakra-ui/react"
export const CardHorizontal = () => (
The perfect latte
Caffè latte is a coffee beverage of Italian origin made with espresso
and steamed milk.
HotCaffeine
)
```
### With Avatar
Use the Card component to display an avatar.
```tsx
import {
Avatar,
Button,
Card,
HStack,
Stack,
Strong,
Text,
} from "@chakra-ui/react"
import { LuCheck, LuX } from "react-icons/lu"
export const CardWithAvatar = () => {
return (
Nate Foss
@natefoss
Nate Foss
has requested to join your team. You can approve or decline their
request.
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| variant | outline | `'elevated' \| 'outline' \| 'subtle'` | The variant of the component |
# Center
```tsx
import { Box, Center } from "@chakra-ui/react"
export const CenterBasic = () => {
return (
This will be centered
)
}
```
## Usage
```jsx
import { AbsoluteCenter, Center, Circle, Square } from "@chakra-ui/react"
```
```jsx
This is the Center
```
## Examples
### Icon
Center can be used to create frames around icons or numbers.
```tsx
import { Box, Center, HStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
export const CenterWithIcons = () => {
return (
1
)
}
```
### Center with Inline
Use the `inline` to change the display to `inline-flex`.
```tsx
import { Box, Center, Link } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"
export const CenterWithInline = () => {
return (
Visit Chakra UI
)
}
```
### Square
`Square` centers its child given the `size` (width and height).
```tsx
import { Square } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
export const CenterWithSquare = () => {
return (
)
}
```
### Circle
`Circle` centers its child given the `size` and creates a circle around it.
```tsx
import { Circle } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
export const CenterWithCircle = () => {
return (
)
}
```
### AbsoluteCenter
`AbsoluteCenter` centers relative to its parent using the `position: absolute`
strategy. Pass the `axis` prop to change the axis of alignment.
```tsx
import { AbsoluteCenter, Box } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
export const CenterWithAbsolute = () => {
return (
)
}
```
## Props
### AbsoluteCenter
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| axis | undefined | `'horizontal' \| 'vertical' \| 'both'` | undefined |
# Checkbox Card
```tsx
import { CheckboxCard } from "@chakra-ui/react"
export const CheckboxCardBasic = () => {
return (
Next.js
)
}
```
## Usage
```tsx
import { CheckboxCard } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Description
Use the `CheckboxCard.Description` component to add a description to the
checkbox card.
```tsx
import { CheckboxCard } from "@chakra-ui/react"
export const CheckboxCardWithDescription = () => {
return (
Next.jsBest for apps
)
}
```
### Group
Use the `CheckboxCardGroup` component to group multiple checkbox cards.
```tsx
import { CheckboxCard, CheckboxGroup, Flex, Text } from "@chakra-ui/react"
export const CheckboxCardWithGroup = () => {
return (
Select framework(s)
{items.map((item) => (
{item.title}
{item.description}
))}
)
}
const items = [
{ value: "next", title: "Next.js", description: "Best for apps" },
{ value: "vite", title: "Vite", description: "Best for SPAs" },
{ value: "astro", title: "Astro", description: "Best for static sites" },
]
```
### Sizes
Pass the `size` prop to the `CheckboxCard.Root` component to change the size of
the checkbox card.
```tsx
import { CheckboxCard, For, Stack } from "@chakra-ui/react"
export const CheckboxCardWithSizes = () => {
return (
{(size) => (
Checkbox {size}
)}
)
}
```
### Variants
Use the `variant` prop to Pass the `variant` prop to the `CheckboxCard.Root`
component to change the variant of the checkbox card.
```tsx
import { CheckboxCard, For, Stack } from "@chakra-ui/react"
export const CheckboxCardWithVariants = () => {
return (
{(variant) => (
Checkbox {variant}
)}
)
}
```
### Disabled
Pass the `disabled` prop to the `CheckboxCard.Root` component to make the
checkbox card disabled.
```tsx
import { CheckboxCard } from "@chakra-ui/react"
export const CheckboxCardDisabled = () => {
return (
Disabled
This is a disabled checkbox
)
}
```
### Addon
Render additional content within the `CheckboxCard.Addon` component to add some
more context to the checkbox card.
```tsx
import { Badge, CheckboxCard, HStack } from "@chakra-ui/react"
export const CheckboxCardWithAddon = () => {
return (
With AddonSome description
Some supporting text
New
)
}
```
### No Indicator
Here's an example of how to use the checkbox card without an indicator.
```tsx
import { CheckboxCard, HStack } from "@chakra-ui/react"
export const CheckboxCardNoIndicator = () => {
return (
Chakra UINext.js
)
}
```
### Icon
Here's an example of how to render custom icons within the checkbox card.
```tsx
import {
CheckboxCard,
CheckboxGroup,
Float,
Icon,
SimpleGrid,
} from "@chakra-ui/react"
import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from "react-icons/hi"
export const CheckboxCardWithIcon = () => {
return (
{items.map((item) => (
{item.icon}
{item.label}
{item.description}
))}
)
}
const items = [
{ icon: , label: "Admin", description: "Give full access" },
{ icon: , label: "User", description: "Give limited access" },
{
icon: ,
label: "Guest",
description: "Give read-only access",
},
{ icon: , label: "Blocked", description: "No access" },
]
```
### Closed Component
Here's how to setup the Checkbox card for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add checkbox-card
```
Here's how to use the it
```tsx
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| variant | outline | `'surface' \| 'subtle' \| 'outline' \| 'solid'` | The variant of the component |
| align | start | `'start' \| 'end' \| 'center'` | The align of the component |
| orientation | horizontal | `'vertical' \| 'horizontal'` | The orientation of the component |
| justify | undefined | `'start' \| 'end' \| 'center'` | The justify of the component |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Checkbox
```tsx
import { Checkbox } from "@chakra-ui/react"
export const CheckboxBasic = () => {
return (
Accept terms and conditions
)
}
```
## Usage
```tsx
import { Checkbox } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Shortcuts
The `Checkbox` component also provides a set of shortcuts for common use cases.
### CheckboxControl
This component renders the `Checkbox.Indicator` within it by default.
This works:
```tsx
```
This might be more concise, if you don't need to customize the indicator:
```tsx
```
## Examples
### Variants
Pass the `variant` prop to the `Checkbox.Root` component to change the visual
style of the checkbox.
```tsx
import { Checkbox, For, HStack, Stack, Text } from "@chakra-ui/react"
export const CheckboxWithVariants = () => {
return (
{(variant) => (
{variant}Checkbox
)}
)
}
```
### Colors
Pass the `colorPalette` prop to the `Checkbox.Root` component to change the
color of the checkbox.
```tsx
import { Checkbox, For, Stack, Text } from "@chakra-ui/react"
export const CheckboxWithColors = () => {
return (
{["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
{colorPalette}
{(variant) => (
CheckboxCheckbox
)}
))}
)
}
```
### Sizes
Pass the `size` prop to the `Checkbox.Root` component to change the size of the
checkbox.
```tsx
import { Checkbox, For, Stack } from "@chakra-ui/react"
export const CheckboxWithSizes = () => {
return (
{(size) => (
Checkbox
)}
)
}
```
### States
Pass the `disabled` or `invalid` prop to the `Checkbox.Root` component to change
the visual state of the checkbox.
```tsx
import { Checkbox, Stack } from "@chakra-ui/react"
export const CheckboxWithStates = () => {
return (
DisabledDisabledReadonlyInvalid
)
}
```
### Controlled
Use the `checked` and `onCheckedChange` props to control the state of the
checkbox.
```tsx
"use client"
import { Checkbox } from "@chakra-ui/react"
import { useState } from "react"
export const CheckboxControlled = () => {
const [checked, setChecked] = useState(false)
return (
setChecked(!!e.checked)}
>
Accept terms and conditions
)
}
```
### Label Position
Here's an example of how to change the label position to the right.
```tsx
import { Checkbox } from "@chakra-ui/react"
export const CheckboxWithLabelPosition = () => {
return (
Accept terms and conditions
)
}
```
### Store
An alternative way to control the checkbox is to use the `RootProvider`
component and the `useCheckbox` store hook.
This way you can access the checkbox state and methods from outside the
checkbox.
```tsx
"use client"
import { Checkbox, useCheckbox } from "@chakra-ui/react"
export const CheckboxWithStore = () => {
const checkbox = useCheckbox()
return (
Accept terms and conditions
)
}
```
### Composition
Here's an example of how to compose a checkbox with a field component.
```tsx
"use client"
import { Button, Checkbox, Field, Input, Stack } from "@chakra-ui/react"
export const CheckboxWithForm = () => {
return (
)
}
```
### Hook Form
Here's an example of how to use the `Checkbox` component with the
`react-hook-form` library.
```tsx
"use client"
import { Button, Checkbox, Code, Field, HStack, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useController, useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
enabled: z.boolean(),
})
type FormData = z.infer
export const CheckboxWithHookForm = () => {
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: { enabled: false },
})
const enabled = useController({
control: form.control,
name: "enabled",
})
const invalid = !!form.formState.errors.enabled
return (
)
}
```
### Group
Use the `CheckboxGroup` component to group multiple checkboxes together.
```tsx
import { Checkbox, CheckboxGroup, Fieldset, For } from "@chakra-ui/react"
export const CheckboxWithGroup = () => {
return (
Select framework
{(value) => (
{value}
)}
)
}
```
### Group Hook Form
Here's an example of how to use the `CheckboxGroup` component with the
`react-hook-form` library.
```tsx
"use client"
import {
Button,
Checkbox,
CheckboxGroup,
Code,
Fieldset,
} from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useController, useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
framework: z.array(z.string()).min(1, {
message: "You must select at least one framework.",
}),
})
type FormData = z.infer
const items = [
{ label: "React", value: "react" },
{ label: "Svelte", value: "svelte" },
{ label: "Vue", value: "vue" },
{ label: "Angular", value: "angular" },
]
export const CheckboxWithGroupHookForm = () => {
const {
handleSubmit,
control,
formState: { errors },
} = useForm({
resolver: zodResolver(formSchema),
})
const framework = useController({
control,
name: "framework",
defaultValue: [],
})
const invalid = !!errors.framework
return (
)
}
```
### Custom Icon
Render a custom icon within `Checkbox.Control` to change the icon of the
checkbox.
```tsx
import { Checkbox } from "@chakra-ui/react"
import { HiOutlinePlus } from "react-icons/hi"
export const CheckboxWithCustomIcon = () => {
return (
With Custom Icon
)
}
```
### Indeterminate
Set the `checked` prop to `indeterminate` to show the checkbox in an
indeterminate state.
```tsx
"use client"
import { Checkbox, Stack } from "@chakra-ui/react"
import { useState } from "react"
const initialValues = [
{ label: "Monday", checked: false, value: "monday" },
{ label: "Tuesday", checked: false, value: "tuesday" },
{ label: "Wednesday", checked: false, value: "wednesday" },
{ label: "Thursday", checked: false, value: "thursday" },
]
export const CheckboxIndeterminate = () => {
const [values, setValues] = useState(initialValues)
const allChecked = values.every((value) => value.checked)
const indeterminate = values.some((value) => value.checked) && !allChecked
const items = values.map((item, index) => (
{
setValues((current) => {
const newValues = [...current]
newValues[index] = { ...newValues[index], checked: !!e.checked }
return newValues
})
}}
>
{item.label}
))
return (
{
setValues((current) =>
current.map((value) => ({ ...value, checked: !!e.checked })),
)
}}
>
Weekdays
{items}
)
}
```
### Description
Here's an example of how to add some further description to the checkbox.
```tsx
import { Box, Checkbox, Stack } from "@chakra-ui/react"
export const CheckboxWithDescription = () => {
return (
I agree to the terms and conditions
By clicking this, you agree to our Terms and Privacy Policy.
)
}
```
### Link
Render an anchor tag within the `Checkbox.Label` to add a link to the label.
```tsx
import { Checkbox, Link } from "@chakra-ui/react"
export const CheckboxWithLink = () => {
return (
I agree to the{" "}
terms and conditions
)
}
```
### Closed Component
Here's how to setup the Checkbox for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add checkbox
```
Here's how to use the it
```tsx
Accept terms and conditions
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | "on" | `string` | The value of checkbox input. Useful for form submission. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| variant | solid | `'outline' \| 'solid' \| 'subtle'` | The variant of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| checked | undefined | `CheckedState` | The checked state of the checkbox |
| defaultChecked | undefined | `CheckedState` | The checked state of the checkbox when it is first rendered.
Use this when you do not need to control the state of the checkbox. |
| disabled | undefined | `boolean` | Whether the checkbox is disabled |
| form | undefined | `string` | The id of the form that the checkbox belongs to. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n root: string\n hiddenInput: string\n control: string\n label: string\n}>` | The ids of the elements in the checkbox. Useful for composition. |
| invalid | undefined | `boolean` | Whether the checkbox is invalid |
| name | undefined | `string` | The name of the input field in a checkbox.
Useful for form submission. |
| onCheckedChange | undefined | `(details: CheckedChangeDetails) => void` | The callback invoked when the checked state changes. |
| readOnly | undefined | `boolean` | Whether the checkbox is read-only |
| required | undefined | `boolean` | Whether the checkbox is required |
| as | undefined | `React.ElementType` | The underlying element to render. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Client Only
## Usage
```jsx
import { ClientOnly, Skeleton } from "@chakra-ui/react"
```
```jsx
}>
```
## Props
These props can be passed to the `ClientOnly` component.
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| fallback | undefined | `React.ReactNode` | undefined |
# Clipboard
```tsx
import { Clipboard, IconButton } from "@chakra-ui/react"
export const ClipboardBasic = () => {
return (
)
}
```
## Usage
```tsx
import { Clipboard } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Button
Use the `Clipboard.Trigger` component to create a copy button.
```tsx
import { Button, Clipboard } from "@chakra-ui/react"
export const ClipboardWithButton = () => {
return (
)
}
```
### Input
Use the `Clipboard.Input` component to create a copy input.
```tsx
import { Clipboard, IconButton, Input, InputGroup } from "@chakra-ui/react"
export const ClipboardWithInput = () => {
return (
Document Link}>
)
}
const ClipboardIconButton = () => {
return (
)
}
```
### Timeout
Use the `timeout` prop to change the duration of the copy message.
```tsx
import { Button, Clipboard } from "@chakra-ui/react"
export const ClipboardWithTimeout = () => {
return (
)
}
```
### Link Appearance
Here's an example that combines the `Clipboard.Trigger` and
`Clipboard.ValueText` components to create a link appearance.
```tsx
import { Clipboard, Link } from "@chakra-ui/react"
export const ClipboardWithLink = () => {
return (
)
}
```
### Store
Alternatively, you can use the `useClipboard` hook to create a custom component.
```tsx
"use client"
import { Button, useClipboard } from "@chakra-ui/react"
export const ClipboardWithStore = () => {
const clipboard = useClipboard({ value: "https://chakra-ui.com" })
return (
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| timeout | 3000 | `number` | The timeout for the copy operation |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| ids | undefined | `Partial<{ root: string; input: string; label: string }>` | The ids of the elements in the clipboard. Useful for composition. |
| onStatusChange | undefined | `(details: CopyStatusDetails) => void` | The function to be called when the value is copied to the clipboard |
| value | undefined | `string` | The value to be copied to the clipboard |
# Close Button
```tsx
import { CloseButton } from "@chakra-ui/react"
export const CloseButtonBasic = () => {
return
}
```
## Usage
```jsx
import { CloseButton } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the close button.
```tsx
import { CloseButton, For, HStack } from "@chakra-ui/react"
export const CloseButtonWithSizes = () => {
return (
{(size) => }
)
}
```
### Variants
Use the `variant` prop to change the appearance of the close button.
```tsx
import { CloseButton, HStack } from "@chakra-ui/react"
export const CloseButtonWithVariants = () => {
return (
)
}
```
### Custom Icon
Pass the custom icon to the `children` of the `CloseButton` component.
```tsx
import { CloseButton } from "@chakra-ui/react"
import { HiX } from "react-icons/hi"
export const CloseButtonWithCustomIcon = () => {
return (
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | solid | `'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` | The variant of the component |
| loading | undefined | `boolean` | undefined |
| loadingText | undefined | `React.ReactNode` | undefined |
# Code
```tsx
import { Code } from "@chakra-ui/react"
export const CodeBasic = () => {
return {`console.log("Hello, world!")`}
}
```
## Usage
```js
import { Code } from "@chakra-ui/react"
```
```jsx
Hello world
```
## Examples
### Sizes
Use the `size` prop to change the size of the code component.
```tsx
import { Code, Stack } from "@chakra-ui/react"
export const CodeWithSizes = () => {
return (
console.log()console.log()console.log()console.log()
)
}
```
### Variants
Use the `variant` prop to change the appearance of the code component.
```tsx
import { Code, Stack } from "@chakra-ui/react"
export const CodeWithVariants = () => {
return (
console.log()console.log()console.log()console.log()
)
}
```
### Colors
Use the `colorPalette` prop to change the color scheme of the component.
```tsx
import { Code, Stack, Text } from "@chakra-ui/react"
export const CodeWithColors = () => {
return (
{["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
{colorPalette}
{`console.log()`}
{`console.log()`}
{`console.log()`}
{`console.log()`}
))}
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | subtle | `'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'` | The variant of the component |
| size | sm | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
# Collapsible
```tsx
import { Box, Collapsible } from "@chakra-ui/react"
export const CollapsibleBasic = () => (
Toggle Collapsible
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
)
```
## Usage
```jsx
import { Collapsible } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Lazy Mounted
Use the `unmountOnExit` prop to make the content unmount when collapsed.
```tsx
import { Box, Collapsible } from "@chakra-ui/react"
export const CollapsibleLazyMounted = () => (
Toggle Collapse (Unmount on exit)
If you inspect the DOM, you'll notice that the content is unmounted when
collapsed. This is useful for performance reasons when you have a lot of
collapsible content.
)
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| defaultOpen | undefined | `boolean` | The initial open state of the collapsible when it is first rendered.
Use when you do not need to control its open state. |
| disabled | undefined | `boolean` | Whether the collapsible is disabled |
| ids | undefined | `Partial<{ root: string; content: string; trigger: string }>` | The ids of the elements in the collapsible. Useful for composition. |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state. |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Function called when the popup is opened |
| open | undefined | `boolean` | Whether the collapsible is open |
# Color Picker
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
export const ColorPickerBasic = () => {
return (
Color
)
}
```
## Usage
```jsx
import { ColorPicker } from "@chakra-ui/react"
```
```jsx
```
## Shortcuts
### ColorPicker.ChannelSlider
This component renders the slider track, thumb and transparency grid.
```tsx
```
is the same as:
```tsx
```
### ColorPicker.Sliders
This is a shortcut component for the hue and alpha sliders:
```tsx
```
### ColorPicker.Area
This component renders the color area thumb and background.
```tsx
```
is the same as:
```tsx
```
### ColorPicker.EyeDropper
This is a shortcut component for:
```tsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the color picker.
```tsx
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
export const ColorPickerWithSizes = () => {
return (
{(size) => (
Color ({size})
{swatches.map((item) => (
))}
)}
)
}
const swatches = ["red", "blue", "green"]
```
### Variants
Use the `variant` prop to change the visual style of the color picker. Values
can be either `outline` or `subtle`.
```tsx
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
export const ColorPickerWithVariants = () => {
return (
{(variant) => (
Color ({variant})
)}
)
}
```
### Input Only
Combine the `ColorPicker.ValueSwatch` and the `ColorPicker.EyeDropper` on the
`InputGroup` to render a color picker that contains only an input.
```tsx
"use client"
import { ColorPicker, InputGroup, parseColor } from "@chakra-ui/react"
export const ColorPickerInputOnly = () => {
return (
Color}
endElementProps={{ px: "1" }}
endElement={}
>
)
}
```
### Swatch Only
Use the `ColorPicker.SwatchGroup` and `ColorPicker.SwatchTrigger` to render only
the color swatches.
```tsx
import { ColorPicker } from "@chakra-ui/react"
export const ColorPickerSwatchOnly = () => {
return (
Color:
{swatches.map((item) => (
))}
)
}
const swatches = ["red", "green", "blue", "purple", "orange", "pink"]
```
### Trigger Only
Compose the color picker to initially show only a trigger using the
`ColorPicker.ValueSwatch` and `ColorPicker.ValueText`.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
export const ColorPickerTriggerOnly = () => {
return (
Color
)
}
```
### Trigger Inside Input
Compose the color picker to trigger in input using the `InputGroup` and
`ColorPickerInput`.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
export const ColorPickerTriggerOnly = () => {
return (
Color
)
}
```
### Controlled
Use the `value` and `onValueChange` props to control the state of the color
picker.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
import { useState } from "react"
export const ColorPickerControlled = () => {
const [color, setColor] = useState(parseColor("#eb5e41"))
return (
setColor(e.value)}
maxW="200px"
>
Color
)
}
```
### Store
An alternative way to control the color picker is to use the `RootProvider`
component and the `useColorPicker` store hook.
This way you can access the color picker state and methods from outside the
color picker.
```tsx
"use client"
import {
ColorPicker,
HStack,
Portal,
parseColor,
useColorPicker,
} from "@chakra-ui/react"
export const ColorPickerWithStore = () => {
const colorPicker = useColorPicker({
defaultValue: parseColor("#eb5e41"),
})
return (
Color
)
}
```
### Change End
Use the `onValueChangeEnd` to listen to when the user finishes selecting a
color, rather than while they are scrubbing or dragging through the color area.
```tsx
"use client"
import {
Code,
ColorPicker,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
import { useState } from "react"
export const ColorPickerChangeEnd = () => {
const [value, setValue] = useState(parseColor("#eb5e41"))
return (
onChangeEnd: {value.toString("hex")} setValue(e.value)}
>
Color
)
}
```
### Channel Slider
Combine the `ColorPickerChannelSliders` and the `format` prop to add the
different color channels to the color picker.
```tsx
"use client"
import {
ColorPicker,
For,
Portal,
Stack,
getColorChannels,
parseColor,
} from "@chakra-ui/react"
const ChannelSliders = (props: { format: ColorPicker.ColorFormat }) => {
const channels = getColorChannels(props.format)
return (
{(channel) => (
{channel}
)}
)
}
export const ColorPickerChannelSliderOnly = () => {
return (
)
}
```
### Hook Form
Here's an example of how to integrate the color picker with `react-hook-form`.
```tsx
"use client"
import {
Button,
ColorPicker,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
import { Controller, useForm } from "react-hook-form"
interface FormValues {
color: string
}
export const ColorPickerWithHookForm = () => {
const { control, handleSubmit } = useForm({
defaultValues: { color: "#000000" },
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Inline
Here's an example of how to display an inline version of the color picker.
```tsx
"use client"
import { ColorPicker, HStack, parseColor } from "@chakra-ui/react"
export const ColorPickerInline = () => {
return (
)
}
```
### Disabled
Pass the `disabled` prop to disable the color picker.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
export const ColorPickerWithDisabled = () => {
return (
Color
)
}
```
### Channel Input
Use the `ChannelFormat.Select` and `ColorPicker.ChannelInput` to create a color
picker that allows users to select their preferred channel.
```tsx
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
VStack,
getColorChannels,
parseColor,
} from "@chakra-ui/react"
const ChannelInputs = (props: { format: ColorPicker.ColorFormat }) => {
const channels = getColorChannels(props.format)
return (
{(channel) => (
{channel.charAt(0).toUpperCase()}
)}
)
}
export const ColorPickerWithChannelInput = () => {
return (
Color
)
}
```
### Fit Content
Pass the `data-fit-content` attribute to the `ColorPicker.Trigger` to make it
fit the content.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
export const ColorPickerWithFitContent = () => {
return (
Color
)
}
```
### ReadOnly
Use the `readOnly` prop to make the color picker component read-only.
### Save Swatch
Here's an example of how to save a selected color as a swatch.
```tsx
"use client"
import {
Button,
ColorPicker,
HStack,
IconButton,
Portal,
Show,
VStack,
parseColor,
} from "@chakra-ui/react"
import { useState } from "react"
import { LuCheck, LuPlus, LuType } from "react-icons/lu"
export const ColorPickerWithSaveSwatch = () => {
const [color, setColor] = useState(parseColor("#000"))
const [view, setView] = useState<"picker" | "swatch">("swatch")
const [swatches, setSwatches] = useState([
"#FF0000",
"#00FF00",
"#0000FF",
"#FFFF00",
])
return (
setColor(e.value)}
maxW="200px"
>
{swatches.map((swatch) => (
))}
setView("picker")}
>
)
}
```
### Swatches
Here's an example of how to combine the color picker with pre-defined swatches.
```tsx
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
export const ColorPickerWithSwatches = () => {
return (
Color
{swatches.map((item) => (
))}
)
}
// prettier-ignore
const swatches = ["#000000", "#4A5568", "#F56565", "#ED64A6", "#9F7AEA", "#6B46C1", "#4299E1", "#0BC5EA", "#00B5D8", "#38B2AC", "#48BB78", "#68D391", "#ECC94B", "#DD6B20"]
```
### Swatch and Input
Here's how to compose a swatch with an input.
```tsx
"use client"
import { ColorPicker, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
export const ColorPickerWithSwatchAndInput = () => {
return (
{swatches.map((item) => (
))}
)
}
const swatches = ["red", "blue", "green"]
```
### Swatch and Trigger
Here's how to compose a swatch with a trigger.
```tsx
"use client"
import { ColorPicker, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
export const ColorPickerWithSwatchAndInput = () => {
return (
{swatches.map((item) => (
))}
)
}
const swatches = ["red", "blue", "green"]
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| closeOnSelect | false | `boolean` | Whether to close the color picker when a swatch is selected |
| format | "rgba" | `ColorFormat` | The color format to use |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| openAutoFocus | true | `boolean` | Whether to auto focus the color picker when it is opened |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| value | #000000 | `Color` | The current color value |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | outline | `'outline' \| 'subtle'` | The variant of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| defaultOpen | undefined | `boolean` | The initial open state of the color picker when it is first rendered.
Use when you do not need to control its open state. |
| defaultValue | undefined | `Color` | The initial value of the color picker when it is first rendered.
Use when you do not need to control the state of the color picker. |
| disabled | undefined | `boolean` | Whether the color picker is disabled |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: ColorChannel): string; channelSliderT...` | The ids of the elements in the color picker. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| initialFocusEl | undefined | `() => HTMLElement \| null` | The initial focus element when the color picker is opened. |
| invalid | undefined | `boolean` | Whether the color picker is invalid |
| name | undefined | `string` | The name for the form input |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onFormatChange | undefined | `(details: FormatChangeDetails) => void` | Function called when the color format changes |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Handler that is called when the user opens or closes the color picker. |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| onValueChange | undefined | `(details: ValueChangeDetails) => void` | Handler that is called when the value changes, as the user drags. |
| onValueChangeEnd | undefined | `(details: ValueChangeDetails) => void` | Handler that is called when the user stops dragging. |
| open | undefined | `boolean` | Whether the color picker is open |
| positioning | undefined | `PositioningOptions` | The positioning options for the color picker |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| readOnly | undefined | `boolean` | Whether the color picker is read-only |
| required | undefined | `boolean` | Whether the color picker is required |
# Color Swatch
```tsx
import { ColorSwatch } from "@chakra-ui/react"
export const ColorSwatchBasic = () => {
return
}
```
## Usage
```tsx
import { ColorSwatch } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the color swatch.
```tsx
import { HStack } from "@chakra-ui/react"
import { ColorSwatch } from "@chakra-ui/react"
import { For } from "@chakra-ui/react"
export const ColorSwatchWithSizes = () => {
return (
{(size) => }
)
}
```
### Alpha
Here's an example of how to create a color swatch with an alpha channel.
```tsx
import { ColorSwatch, HStack } from "@chakra-ui/react"
export const ColorSwatchWithAlpha = () => {
return (
{colors.map((color) => (
))}
)
}
const colors = [
"rgba(255, 0, 0, 0.5)",
"rgba(0, 0, 255, 0.7)",
"rgba(0, 255, 0, 0.4)",
"rgba(255, 192, 203, 0.6)",
]
```
### With Badge
Here's an example of how to compose the `ColorSwatch` with a `Badge`.
```tsx
import { Badge, ColorSwatch } from "@chakra-ui/react"
export const ColorSwatchWithBadge = () => {
return (
#bada55
)
}
```
### Mixed Colors
Use the `ColorSwatchMix` to create a color swatch that contains multiple colors,
but retains the size of a single color swatch.
```tsx
import { ColorSwatchMix, HStack } from "@chakra-ui/react"
export const ColorSwatchMixed = () => {
return (
)
}
```
### Palette
Here's an example of composing multiple swatches to create a palette.
```tsx
import { ColorSwatch, Group } from "@chakra-ui/react"
export const ColorSwatchPalette = () => {
return (
{swatches.map((color) => (
))}
)
}
const swatches = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"]
```
# Container
```tsx
import { Container } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const ContainerBasic = () => {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
)
}
```
## Usage
The default `maxWidth` is `8xl` which maps to `90rem (1440px)`.
```jsx
import { Container } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Sizes
Use the `maxWidth` prop to change the size of the container.
```tsx
import { Container, For, Stack } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const ContainerWithSizes = () => {
return (
{(size) => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
)}
)
}
```
### Fluid
Use the `fluid` prop to make the container stretch to fill the width of its
parent.
```tsx
import { Container } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const ContainerWithFluid = () => {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| centerContent | undefined | `'true' \| 'false'` | The centerContent of the component |
| fluid | undefined | `'true' \| 'false'` | The fluid of the component |
# DataList
```tsx
import { DataList } from "@chakra-ui/react"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
export const DataListBasic = () => {
return (
{stats.map((item) => (
{item.label}{item.value}
))}
)
}
```
## Usage
```tsx
import { DataList } from "@chakra-ui/react"
```
```tsx
{data.map((item) => (
{item.label}{item.value}
))}
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Use the `size` prop to change the size of the datalist component.
```tsx
import { DataList, Stack } from "@chakra-ui/react"
export const DataListWithSizes = () => {
return (
NameJohn DoeNameJohn DoeNameJohn Doe
)
}
```
### Variants
Use the `variant` prop to change the variant of the datalist component.
> Added in `v3.1.x`
```tsx
import { DataList, For, Stack } from "@chakra-ui/react"
export const DataListWithVariants = () => {
return (
{(variant) => (
{stats.map((item) => (
{item.label}{item.value}
))}
)}
)
}
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
```
### Orientation
Use the `orientation` prop to change the orientation of the datalist component.
```tsx
import { DataList } from "@chakra-ui/react"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
export const DataListVertical = () => {
return (
{stats.map((item) => (
{item.label}{item.value}
))}
)
}
```
### Info Tip
Render the `InfoTip` component within `DataList.Item` to provide additional
context to the datalist.
```tsx
import { DataList } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
export const DataListWithInfo = () => {
return (
{stats.map((item) => (
{item.label}
This is some info{item.value}
))}
)
}
```
### Separator
Use the `divideY` prop on the `DataList.Root` to add a separator between items.
```tsx
import { DataList } from "@chakra-ui/react"
export const DataListWithSeparator = () => {
return (
{items.map((item) => (
{item.label}{item.value}
))}
)
}
const items = [
{ label: "First Name", value: "Jassie" },
{ label: "Last Name", value: "Bhatia" },
{ label: "Email", value: "jassie@jassie.dev" },
{ label: "Phone", value: "1234567890" },
{ label: "Address", value: "1234 Main St, Anytown, USA" },
]
```
### Closed Component
Here's how to setup the Data List for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add data-list
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| orientation | vertical | `'horizontal' \| 'vertical'` | The orientation of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| variant | subtle | `'subtle' \| 'bold'` | The variant of the component |
# Dialog
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogBasic = () => {
return (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
## Usage
```tsx
import { Dialog } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the dialog component.
```tsx
import {
Button,
CloseButton,
Dialog,
For,
HStack,
Portal,
} from "@chakra-ui/react"
export const DialogWithSizes = () => {
return (
{(size) => (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
)}
)
}
```
### Cover
Use the `size="cover"` prop to make the dialog component cover the entire screen
while revealing a small portion of the page behind.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogWithCover = () => {
return (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Fullscreen
Use the `size="full"` prop to make the dialog component take up the entire
screen.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogWithFullscreen = () => {
return (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Placement
Use the `placement` prop to change the placement of the dialog component.
```tsx
import {
Button,
CloseButton,
Dialog,
For,
HStack,
Portal,
} from "@chakra-ui/react"
export const DialogWithPlacement = () => {
return (
{(placement) => (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
)}
)
}
```
### Controlled
Use the `open` and `onOpenChange` prop to control the visibility of the dialog
component.
```tsx
"use client"
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
import { useState } from "react"
import Lorem from "react-lorem-ipsum"
export const DialogControlled = () => {
const [open, setOpen] = useState(false)
return (
setOpen(e.open)}>
Dialog Title
)
}
```
### Store
An alternative way to control the dialog is to use the `RootProvider` component
and the `useDialog` store hook.
This way you can access the dialog state and methods from outside the dialog.
```tsx
"use client"
import {
Button,
CloseButton,
Dialog,
Portal,
useDialog,
} from "@chakra-ui/react"
export const DialogWithStore = () => {
const dialog = useDialog()
return (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Context
Use the `DialogContext` component to access the dialog state and methods from
outside the dialog.
```tsx
"use client"
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogWithContext = () => {
return (
{(store) => (
Dialog is open: {store.open ? "true" : "false"}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
)}
)
}
```
### Initial Focus
Use the `initialFocusEl` prop to set the initial focus of the dialog component.
```tsx
"use client"
import { Button, Dialog, Field, Input, Portal, Stack } from "@chakra-ui/react"
import { useRef } from "react"
export const DialogWithInitialFocus = () => {
const ref = useRef(null)
return (
ref.current}>
Dialog HeaderFirst NameLast Name
)
}
```
### Inside Scroll
Use the `scrollBehavior=inside` prop to change the scroll behavior of the dialog
when its content overflows.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
import Lorem from "react-lorem-ipsum"
export const DialogWithInsideScroll = () => {
return (
With Inside Scroll
)
}
```
### Outside Scroll
Use the `scrollBehavior=outside` prop to change the scroll behavior of the
dialog when its content overflows.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
import Lorem from "react-lorem-ipsum"
export const DialogWithOutsideScroll = () => {
return (
With Outside Scroll
)
}
```
### Motion Preset
Use the `motionPreset` prop to change the animation of the dialog component.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogWithMotionPreset = () => {
return (
Dialog Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Alert Dialog
Set the `role: "alertdialog"` prop to change the dialog component to an alert
dialog.
```tsx
import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
export const DialogWithRole = () => {
return (
Are you sure?
This action cannot be undone. This will permanently delete your
account and remove your data from our systems.
)
}
```
### Close Button Outside
Here's an example of how to customize the `Dialog.CloseTrigger` component to
position the close button outside the dialog component.
```tsx
import {
AspectRatio,
Button,
CloseButton,
Dialog,
Portal,
} from "@chakra-ui/react"
export const DialogWithCloseOutside = () => {
return (
Dialog Title
This is a dialog with some content and a video.
)
}
```
### DataList
Here's an example of how to compose the dialog component with the `DataList`
component.
```tsx
import {
Avatar,
Badge,
Button,
CloseButton,
DataList,
Dialog,
HStack,
Portal,
Textarea,
VStack,
} from "@chakra-ui/react"
export const DialogWithDatalist = () => {
return (
Prepare Chakra V3StatusCompletedAssigned to
Segun Adebayo
Due date12th August 2024
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| closeOnEscape | true | `boolean` | Whether to close the dialog when the escape key is pressed |
| closeOnInteractOutside | true | `boolean` | Whether to close the dialog when the outside is clicked |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| modal | true | `boolean` | Whether to prevent pointer interaction outside the element and hide all content below it |
| preventScroll | true | `boolean` | Whether to prevent scrolling behind the dialog when it's opened |
| role | "dialog" | `'dialog' \| 'alertdialog'` | The dialog's role |
| trapFocus | true | `boolean` | Whether to trap focus inside the dialog when it's opened |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| placement | top | `'center' \| 'top' \| 'bottom'` | The placement of the component |
| scrollBehavior | outside | `'inside' \| 'outside'` | The scrollBehavior of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'cover' \| 'full'` | The size of the component |
| motionPreset | scale | `'scale' \| 'slide-in-bottom' \| 'slide-in-top' \| 'slide-in-left' \| 'slide-in-right' \| 'none'` | The motionPreset of the component |
| aria-label | undefined | `string` | Human readable label for the dialog, in event the dialog title is not rendered |
| defaultOpen | undefined | `boolean` | The initial open state of the dialog when it is first rendered.
Use when you do not need to control its open state. |
| finalFocusEl | undefined | `() => HTMLElement \| null` | Element to receive focus when the dialog is closed |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n trigger: string\n positioner: string\n backdrop: string\n content: string\n closeTrigger: string\n title: string\n description: string\n}>` | The ids of the elements in the dialog. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| initialFocusEl | undefined | `() => HTMLElement \| null` | Element to receive focus when the dialog is opened |
| onEscapeKeyDown | undefined | `(event: KeyboardEvent) => void` | Function called when the escape key is pressed |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Callback to be invoked when the dialog is opened or closed |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| open | undefined | `boolean` | Whether the dialog is open |
| persistentElements | undefined | `(() => Element \| null)[]` | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| restoreFocus | undefined | `boolean` | Whether to restore focus to the element that had focus before the dialog was opened |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Drawer
```tsx
import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
export const DrawerBasic = () => {
return (
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
## Usage
```tsx
import { Drawer } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Controlled
Use the `open` and `onOpenChange` props to control the drawer component.
```tsx
"use client"
import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
import { useState } from "react"
export const DrawerControlled = () => {
const [open, setOpen] = useState(false)
return (
setOpen(e.open)}>
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Sizes
Use the `size` prop to change the size of the drawer component.
```tsx
import {
Button,
CloseButton,
Drawer,
For,
HStack,
Kbd,
Portal,
} from "@chakra-ui/react"
export const DrawerWithSizes = () => {
return (
{(size) => (
Drawer Title
Press the esc key to close the drawer.
)}
)
}
```
### Context
Use the `DrawerContext` component to access the drawer state and methods from
outside the drawer.
```tsx
"use client"
import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
export const DrawerWithContext = () => {
return (
{(store) => (
Drawer is open: {store.open ? "true" : "false"}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
)}
)
}
```
### Offset
Pass the `offset` prop to the `DrawerContent` to change the offset of the drawer
component.
```tsx
import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
export const DrawerWithOffset = () => {
return (
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Placement
Use the `placement` prop to change the placement of the drawer component.
```tsx
import {
Button,
CloseButton,
Drawer,
For,
HStack,
Portal,
} from "@chakra-ui/react"
export const DrawerWithPlacement = () => {
return (
{(placement) => (
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
)}
)
}
```
### Initial Focus
Use the `initialFocusEl` prop to set the initial focus of the drawer component.
```tsx
"use client"
import {
Button,
CloseButton,
Drawer,
Input,
Portal,
Stack,
} from "@chakra-ui/react"
import { useRef } from "react"
export const DrawerWithInitialFocus = () => {
const ref = useRef(null)
return (
ref.current}>
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Custom Container
Here's an example of how to render the drawer component in a custom container.
Consider setting `closeOnInteractOutside` to `false` to prevent the drawer from
closing when interacting outside the drawer.
```tsx
"use client"
import {
Button,
CloseButton,
Drawer,
Portal,
Stack,
type StackProps,
Text,
} from "@chakra-ui/react"
import { forwardRef, useRef } from "react"
const DrawerContainer = forwardRef(
function DrawerContainer(props, ref) {
return (
)
},
)
export const DrawerWithCustomContainer = () => {
const portalRef = useRef(null)
return (
Render drawer hereDrawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
### Header Actions
Here's an example of rendering actions in the header of the drawer component.
```tsx
import {
Button,
ButtonGroup,
CloseButton,
Drawer,
Portal,
} from "@chakra-ui/react"
export const DrawerWithHeaderActions = () => {
return (
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | xs | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | The size of the component |
| placement | end | `'start' \| 'end' \| 'top' \| 'bottom'` | The placement of the component |
| contained | undefined | `'true' \| 'false'` | The contained of the component |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Editable
```tsx
import { Editable } from "@chakra-ui/react"
export const EditableBasic = () => (
)
```
## Usage
```jsx
import { Editable } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Double Click
Use the `activationMode` prop to make the content editable when users double
click.
```tsx
import { Editable } from "@chakra-ui/react"
export const EditableWithDoubleClick = () => (
)
```
### Disabled
Use the `disabled` prop to disable the editable component.
```tsx
import { Editable } from "@chakra-ui/react"
export const EditableDisabled = () => {
return (
)
}
```
### Textarea
You can make a text area editable.
```tsx
import { Editable } from "@chakra-ui/react"
export const EditableWithTextarea = () => {
return (
)
}
```
### With Controls
Add controls such as "edit", "cancel" and "submit" to `Editable` for better user
experience.
```tsx
import { Editable, IconButton } from "@chakra-ui/react"
import { LuCheck, LuPencilLine, LuX } from "react-icons/lu"
export const EditableWithControls = () => {
return (
)
}
```
### Controlled
Use the `value` and `onValueChange` props to control the editable component.
```tsx
"use client"
import { Editable } from "@chakra-ui/react"
import { useState } from "react"
export const EditableControlled = () => {
const [name, setName] = useState("")
return (
setName(e.value)}
placeholder="Click to edit"
>
)
}
```
### Store
An alternative way to control the editable component is to use the
`RootProvider` component and the `useEditable` store hook.
This way you can access the editable state and methods from outside the
editable.
```tsx
"use client"
import { Code, Editable, Stack, useEditable } from "@chakra-ui/react"
export const EditableWithStore = () => {
const editable = useEditable({
defaultValue: "Click to edit",
})
return (
{editable.editing ? "editing" : "not editing"}
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| activationMode | "focus" | `ActivationMode` | The activation mode for the preview element.
- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked |
| selectOnFocus | true | `boolean` | Whether to select the text in the input when it is focused. |
| submitMode | "both" | `SubmitMode` | The action that triggers submit in the edit mode:
- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| autoResize | undefined | `boolean` | Whether the editable should auto-resize to fit the content. |
| defaultEdit | undefined | `boolean` | The initial edit state of the editable when it is first rendered.
Use when you do not need to control its edit state. |
| defaultValue | undefined | `string` | The initial value of the editable when it is first rendered.
Use when you do not need to control the state of the editable. |
| disabled | undefined | `boolean` | Whether the editable is disabled |
| edit | undefined | `boolean` | Whether the editable is in edit mode. |
| finalFocusEl | undefined | `() => HTMLElement \| null` | The element that should receive focus when the editable is closed.
By default, it will focus on the trigger element. |
| form | undefined | `string` | The associate form of the underlying input. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n root: string\n area: string\n label: string\n preview: string\n input: string\n control: string\n submitTrigger: string\n cancelTrigger: string\n editTrigger: string\n}>` | The ids of the elements in the editable. Useful for composition. |
| invalid | undefined | `boolean` | Whether the input's value is invalid. |
| maxLength | undefined | `number` | The maximum number of characters allowed in the editable |
| name | undefined | `string` | The name attribute of the editable component. Used for form submission. |
| onEditChange | undefined | `(details: EditChangeDetails) => void` | The callback that is called when the edit mode is changed |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| onValueChange | undefined | `(details: ValueChangeDetails) => void` | The callback that is called when the editable's value is changed |
| onValueCommit | undefined | `(details: ValueChangeDetails) => void` | The callback that is called when the editable's value is submitted. |
| onValueRevert | undefined | `(details: ValueChangeDetails) => void` | The callback that is called when the esc key is pressed or the cancel button is clicked |
| placeholder | undefined | `string \| { edit: string; preview: string }` | The placeholder value to show when the `value` is empty |
| readOnly | undefined | `boolean` | Whether the editable is readonly |
| required | undefined | `boolean` | Whether the editable is required |
| translations | undefined | `IntlTranslations` | Specifies the localized strings that identifies the accessibility elements and their states |
| value | undefined | `string` | The value of the editable in both edit and preview mode |
# Em
```tsx
import { Em, Text } from "@chakra-ui/react"
export const EmBasic = () => {
return (
The design system is a collection of UI elements
)
}
```
## Usage
```js
import { Em } from "@chakra-ui/react"
```
```jsx
The design system is a collection of UI elements
```
# Empty State
```tsx
import { EmptyState, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
export const EmptyStateBasic = () => {
return (
Your cart is empty
Explore our products and add items to your cart
)
}
```
## Usage
```tsx
import { EmptyState } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Use the `size` prop to set the size of the Empty state.
```tsx
import { EmptyState, For, Stack, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
export const EmptyStateSizes = () => {
return (
{(size) => (
Your cart is empty
Explore our products and add items to your cart
)}
)
}
```
### Action
Here's an example of an empty state with an action button.
```tsx
import { Button, ButtonGroup, EmptyState, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
export const EmptyStateWithAction = () => {
return (
Start adding tokens
Add a new design token to get started
)
}
```
### List
Here's an example of an empty state with a list.
```tsx
import { EmptyState, List, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
export const EmptyStateWithList = () => {
return (
No results found
Try adjusting your search
Try removing filtersTry different keywords
)
}
```
### Closed Component
Here's how to setup the Empty State for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add empty-state
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
# Environment Provider
We use
[Zag.js](https://zagjs.com/overview/composition#custom-window-environment)
internally, which relies on DOM query methods like `document.querySelectorAll`
and `document.getElementById`. In custom environments like iframes, Shadow DOM,
or Electron, these methods might not work as expected.
To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set
the appropriate root node or document, ensuring correct DOM queries.
## Usage
```jsx
import { EnvironmentProvider } from "@chakra-ui/react"
```
```jsx
{/* Your App */}
```
## Examples
### iframe
Here's an example that uses `react-frame-component` to set the
`EnvironmentProvider`'s value with the iframe environment.
```jsx
import { EnvironmentProvider } from "@chakra-ui/react"
import Frame, { FrameContextConsumer } from "react-frame-component"
export const Demo = () => (
{({ document }) => (
document}>
{/* Your App */}
)}
)
```
### Shadow DOM
Here's an example that uses `react-shadow` to set the `EnvironmentProvider`'s
value with Shadow DOM environment.
```jsx
import { EnvironmentProvider } from "@chakra-ui/react"
import { useRef } from "react"
import root from "react-shadow"
export const Demo = () => {
const portalRef = useRef()
return (
portalRef?.current?.shadowRoot ?? document}
>
{/* Your App */}
)
}
```
### Accessing Context
Use the `useEnvironmentContext` hook to access the `RootNode`, `Document`, and
`Window` context.
```jsx
import { useEnvironmentContext } from "@chakra-ui/react"
export const Demo = () => {
const { getRootNode } = useEnvironmentContext()
return
{JSON.stringify(getRootNode(), null, 2)}
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | undefined | `RootNode \| (() => RootNode)` | undefined |
# Field
```tsx
import { Field, Input } from "@chakra-ui/react"
export const FieldBasic = () => {
return (
Email
)
}
```
## Usage
```tsx
import { Field } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Error Text
Pass the `invalid` prop to `Field.Root` and use the `Field.ErrorText` to
indicate that the field is invalid.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const FieldWithErrorText = () => {
return (
EmailThis is an error text
)
}
```
### Helper Text
Use the `Field.HelperText` to add helper text to the field.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const FieldWithHelperText = () => {
return (
EmailThis is a helper text
)
}
```
### Horizontal
Use the `orientation="horizontal"` prop to align the label and input
horizontally.
```tsx
import { Field, Input, Stack, Switch } from "@chakra-ui/react"
export const FieldHorizontal = () => {
return (
NameEmailHide email
)
}
```
### Disabled
Use the `disabled` prop to disable the field.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const FieldWithDisabled = () => {
return (
Email
)
}
```
### Textarea
Here's how to use the field component with a textarea.
```tsx
import { Field, Textarea } from "@chakra-ui/react"
export const FieldWithTextarea = () => {
return (
Email
)
}
```
### Native Select
Here's how to use the field component with a native select.
```tsx
import { Field, NativeSelect } from "@chakra-ui/react"
export const FieldWithNativeSelect = () => {
return (
Email
)
}
```
### Required
Pass the `required` prop to `Field.Root` and use the `Field.RequiredIndicator`
to indicate that the field is required.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const FieldWithRequired = () => {
return (
Email
)
}
```
### Optional
Pass the `fallback` prop to the `Field.RequiredIndicator` to add optional text.
```tsx
import { Badge, Field, Input } from "@chakra-ui/react"
export const FieldWithOptional = () => {
return (
Email
Optional
}
/>
)
}
```
### Closed Component
Here's how to setup the Field for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add field
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| orientation | vertical | `'vertical' \| 'horizontal'` | The orientation of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| disabled | undefined | `boolean` | Indicates whether the field is disabled. |
| ids | undefined | `ElementIds` | The ids of the field parts. |
| invalid | undefined | `boolean` | Indicates whether the field is invalid. |
| readOnly | undefined | `boolean` | Indicates whether the field is read-only. |
| required | undefined | `boolean` | Indicates whether the field is required. |
| as | undefined | `React.ElementType` | The underlying element to render. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Fieldset
```tsx
import {
Button,
Field,
Fieldset,
For,
Input,
NativeSelect,
Stack,
} from "@chakra-ui/react"
export const FieldsetBasic = () => {
return (
Contact details
Please provide your contact details below.
NameEmail addressCountry
{(item) => (
)}
)
}
```
## Usage
```jsx
import { Fieldset } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Disabled
Use the `disabled` prop to disable the fieldset to disable all input elements
within the fieldset.
```tsx
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
export const FieldsetWithDisabled = () => {
return (
Shipping detailsStreet addressCountry
{(item) => (
)}
Delivery notes
)
}
```
### Invalid
Use the `invalid` prop to mark the fieldset as invalid. This will show the error
text.
> Note: You need to pass the `invalid` prop to the `Field` component within the
> fieldset to make each input element invalid.
```tsx
import {
Field,
Fieldset,
For,
Input,
NativeSelect,
Textarea,
} from "@chakra-ui/react"
export const FieldsetWithInvalid = () => {
return (
Shipping detailsStreet addressCountry
{(item) => (
)}
Notes
Some fields are invalid. Please check them.
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| invalid | undefined | `boolean` | Indicates whether the fieldset is invalid. |
# File Upload
```tsx
import { Button, FileUpload } from "@chakra-ui/react"
import { HiUpload } from "react-icons/hi"
export const FileUploadBasic = () => {
return (
)
}
```
## Usage
```jsx
import { FileUpload } from "@chakra-ui/react"
```
```jsx
```
## Shortcuts
The `FileUpload` component also provides a set of shortcuts for common use
cases.
### FileUploadItems
By default, the `FileUploadItems` shortcut renders the list of uploaded files.
This works:
```tsx
{({ acceptedFiles }) =>
acceptedFiles.map((file) => (
))
}
```
This might be more concise, if you don't need to customize the file upload
items:
```tsx
```
### FileUploadList
The `FileUploadList` shortcut renders the list of uploaded files. It composes
the `FileUpload.ItemGroup` and `FileUpload.Items` components.
```tsx
```
is the same as:
```tsx
```
## Examples
### Accepted Files
Define the accepted files for upload using the `accept` prop.
```tsx
import { Button, FileUpload } from "@chakra-ui/react"
import { HiUpload } from "react-icons/hi"
export const FileUploadAcceptedFiles = () => {
return (
)
}
```
### Multiple Files
Upload multiple files at once by using the `maxFiles` prop.
```tsx
import { Button, FileUpload } from "@chakra-ui/react"
import { HiUpload } from "react-icons/hi"
export const FileUploadMultiple = () => {
return (
)
}
```
### Custom Preview
Here's an example of how to show a custom image preview for files.
```tsx
"use client"
import {
Button,
FileUpload,
Float,
useFileUploadContext,
} from "@chakra-ui/react"
import { LuFileImage, LuX } from "react-icons/lu"
const FileUploadList = () => {
const fileUpload = useFileUploadContext()
const files = fileUpload.acceptedFiles
if (files.length === 0) return null
return (
{files.map((file) => (
))}
)
}
export const FileUploadCustomPreview = () => {
return (
)
}
```
### Directory
Use the `directory` prop to allow selecting a directory instead of a file.
```tsx
import { Button, FileUpload } from "@chakra-ui/react"
import { HiUpload } from "react-icons/hi"
export const FileUploadDirectory = () => {
return (
)
}
```
### Media Capture
Use the `capture` prop to select and upload files from different environments
and media types.
> **Note:** This is
> [not fully supported](https://caniuse.com/mdn-api_htmlinputelement_capture) in
> all browsers.
```tsx
import { Button, FileUpload } from "@chakra-ui/react"
import { HiCamera } from "react-icons/hi"
export const FileUploadMediaCapture = () => {
return (
)
}
```
### Dropzone
Drop multiple files inside the dropzone and use the `maxFiles` prop to set the
number of files that can be uploaded at once.
```tsx
import { Box, FileUpload, Icon } from "@chakra-ui/react"
import { LuUpload } from "react-icons/lu"
export const FileUploadWithDropzone = () => {
return (
Drag and drop files here.png, .jpg up to 5MB
)
}
```
### Input
Use the `FileInput` component to create a trigger that looks like a text input.
```tsx
import { FileUpload, Input } from "@chakra-ui/react"
export const FileUploadWithInput = () => {
return (
Upload file
)
}
```
### Clearable
Here's an example of a clearable file upload input.
```tsx
import { CloseButton, FileUpload, Input, InputGroup } from "@chakra-ui/react"
import { LuFileUp } from "react-icons/lu"
export const FileUploadWithInputClear = () => {
return (
Upload file}
endElement={
}
>
)
}
```
### Pasting Files
Here's an example of handling files pasted from the clipboard.
```tsx
"use client"
import {
FileUpload,
Float,
HStack,
Input,
type InputProps,
useFileUploadContext,
} from "@chakra-ui/react"
import { HiX } from "react-icons/hi"
const FilePasteInput = (props: InputProps) => {
const fileUpload = useFileUploadContext()
return (
{
fileUpload.setClipboardFiles(e.clipboardData)
}}
/>
)
}
const FileImageList = () => {
const fileUpload = useFileUploadContext()
return (
{fileUpload.acceptedFiles.map((file) => (
))}
)
}
export const FileUploadWithPasteEvent = () => {
return (
)
}
```
### Store
An alternative way to control the file upload is to use the `RootProvider`
component and the `useFileUpload` store hook.
This way you can access the file upload state and methods from outside the file
upload.
```tsx
"use client"
import {
Button,
Code,
FileUpload,
Stack,
useFileUpload,
} from "@chakra-ui/react"
import { HiUpload } from "react-icons/hi"
export const FileUploadWithStore = () => {
const fileUpload = useFileUpload({
maxFiles: 1,
maxFileSize: 3000,
})
const accepted = fileUpload.acceptedFiles.map((file) => file.name)
const rejected = fileUpload.rejectedFiles.map((e) => e.file.name)
return (
accepted: {accepted.join(", ")}rejected: {rejected.join(", ")}
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| allowDrop | true | `boolean` | Whether to allow drag and drop in the dropzone element |
| locale | "en-US" | `string` | The current locale. Based on the BCP 47 definition. |
| maxFiles | 1 | `number` | The maximum number of files |
| maxFileSize | Infinity | `number` | The maximum file size in bytes |
| minFileSize | 0 | `number` | The minimum file size in bytes |
| preventDocumentDrop | true | `boolean` | Whether to prevent the drop event on the document |
| accept | undefined | `Record \| FileMimeType \| FileMimeType[]` | The accept file types |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| capture | undefined | `'user' \| 'environment'` | The default camera to use when capturing media |
| directory | undefined | `boolean` | Whether to accept directories, only works in webkit browsers |
| disabled | undefined | `boolean` | Whether the file input is disabled |
| ids | undefined | `Partial<{\n root: string\n dropzone: string\n hiddenInput: string\n trigger: string\n label: string\n item(id: string): string\n itemName(id: string): string\n itemSizeText(id: string): string\n itemPreview(id: string): string\n}>` | The ids of the elements. Useful for composition. |
| invalid | undefined | `boolean` | Whether the file input is invalid |
| name | undefined | `string` | The name of the underlying file input |
| onFileAccept | undefined | `(details: FileAcceptDetails) => void` | Function called when the file is accepted |
| onFileChange | undefined | `(details: FileChangeDetails) => void` | Function called when the value changes, whether accepted or rejected |
| onFileReject | undefined | `(details: FileRejectDetails) => void` | Function called when the file is rejected |
| required | undefined | `boolean` | Whether the file input is required |
| translations | undefined | `IntlTranslations` | The localized messages to use. |
| validate | undefined | `(file: File, details: FileValidateDetails) => FileError[] \| null` | Function to validate a file |
| as | undefined | `React.ElementType` | The underlying element to render. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Flex
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexBasic = () => {
return (
)
}
```
## Usage
```jsx
import { Flex } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Direction
Use the `direction` or `flexDirection` prop to change the direction of the flex
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithDirection = () => {
return (
)
}
```
### Align
Use the `align` or `alignItems` prop to align the children along the cross axis.
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithAlign = () => {
return (
)
}
```
### Justify
Use the `justify` or `justifyContent` prop to align the children along the main
axis.
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithJustify = () => {
return (
flex-start
center
flex-end
space-between
)
}
```
### Order
Use the `order` prop to change the order of the children.
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithOrder = () => {
return (
1
2
3
)
}
```
### Auto Margin
Apply margin to a flex item to push it away from its siblings.
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithAutoMargin = () => {
return (
)
}
```
### Wrap
Use the `wrap` or `flexWrap` prop to wrap the children when they overflow the
parent.
```tsx
import { Flex } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const FlexWithWrap = () => {
return (
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| align | undefined | `SystemStyleObject['alignItems']` | undefined |
| justify | undefined | `SystemStyleObject['justifyContent']` | undefined |
| wrap | undefined | `SystemStyleObject['flexWrap']` | undefined |
| direction | undefined | `SystemStyleObject['flexDirection']` | undefined |
| basis | undefined | `SystemStyleObject['flexBasis']` | undefined |
| grow | undefined | `SystemStyleObject['flexGrow']` | undefined |
| shrink | undefined | `SystemStyleObject['flexShrink']` | undefined |
| inline | undefined | `boolean` | undefined |
# Float
```tsx
import { Box, Circle, Float } from "@chakra-ui/react"
export const FloatBasic = () => (
3
)
```
## Usage
Float requires a parent element with `position: relative` style applied.
```jsx
import { Box, Float } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Placement
Use the `placement` prop to position the element along the edges of the
container.
```tsx
import { Box, Circle, Float, HStack, Stack } from "@chakra-ui/react"
export const FloatWithPlacements = () => (
{placements.map((placement) => (
{placement}
3
))}
)
const placements = [
"bottom-end",
"bottom-start",
"top-end",
"top-start",
"bottom-center",
"top-center",
"middle-center",
"middle-end",
"middle-start",
] as const
```
### Offset X
Use the `offsetX` prop to offset the element along the x-axis.
```tsx
import { Box, Circle, Float } from "@chakra-ui/react"
export const FloatWithOffsetX = () => (
3
)
```
### Offset Y
Use the `offsetY` prop to offset the element along the y-axis.
```tsx
import { Box, Circle, Float } from "@chakra-ui/react"
export const FloatWithOffsetY = () => (
3
)
```
### Offset
Use the `offset` prop to offset the element along both axes.
```tsx
import { Box, Circle, Float } from "@chakra-ui/react"
export const FloatWithOffset = () => (
3
)
```
### Avatar
Here's an example of composing a `Float` component with an `Avatar` component.
```tsx
import { Avatar, Badge, Box, Float } from "@chakra-ui/react"
export const FloatWithAvatar = () => {
return (
New
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| placement | top-end | `ConditionalValue<\n \| 'bottom-end'\n \| 'bottom-start'\n \| 'top-end'\n \| 'top-start'\n \| 'bottom-center'\n \| 'top-center'\n \| 'middle-center'\n \| 'middle-end'\n \| 'middle-start'\n >` | The placement of the indicator |
| offsetX | undefined | `SystemStyleObject['left']` | The x offset of the indicator |
| offsetY | undefined | `SystemStyleObject['top']` | The y offset of the indicator |
| offset | undefined | `SystemStyleObject['top']` | The x and y offset of the indicator |
# For
```tsx
import { For } from "@chakra-ui/react"
export const ForBasic = () => {
return (
{(item, index) =>
{item}
}
)
}
```
## Usage
The `For` component is used to render a list of items in a strongly typed
manner. It is similar to the `.map()`.
```jsx
import { For } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Object
Here's an example of using the `For` component to loop over an object.
```tsx
import { Box, For, Stack, Text } from "@chakra-ui/react"
export const ForWithObject = () => {
return (
{(item, index) => (
{item.name}Powers: {item.powers.join(", ")}
)}
)
}
```
### Fallback
Use the `fallback` prop to render a fallback component when the array is empty
or undefined.
```tsx
import { For, Stack, VStack } from "@chakra-ui/react"
import { LuBox } from "react-icons/lu"
export const ForWithFallback = () => {
return (
No items to show
}
>
{(item, index) => (
{item}
)}
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| each | undefined | `T[] \| readonly T[] \| undefined` | The array to iterate over |
| fallback | undefined | `React.ReactNode` | The fallback content to render when the array is empty |
# Format Byte
```tsx
import { FormatByte, Text } from "@chakra-ui/react"
export const FormatByteBasic = () => {
return (
File size:
)
}
```
## Usage
```jsx
import { FormatByte } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Sizes
The format functions works for any size of bytes.
```tsx
import { FormatByte, Stack, Text } from "@chakra-ui/react"
export const FormatByteSizes = () => {
return (
)
}
```
### Format Bits
Use the `unit` prop to change the byte format to bits.
```tsx
import { FormatByte, Text } from "@chakra-ui/react"
export const FormatByteWithUnit = () => {
return (
File size:
)
}
```
### Locale
Wrap the `FormatByte` component within the `LocaleProvider` to change the
locale.
```tsx
import { FormatByte, HStack, LocaleProvider, Text } from "@chakra-ui/react"
export const FormatByteWithLocale = () => {
return (
de-DEzh-CN
)
}
```
### Unit Display
Use the `unitDisplay` prop to change the byte format to compact notation.
```tsx
import { FormatByte, Stack, Text } from "@chakra-ui/react"
export const FormatByteWithUnitDisplay = () => {
return (
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | undefined | `number` | The byte size to format |
| unit | undefined | `'bit' \| 'byte'` | The unit granularity to display |
| unitDisplay | undefined | `'long' \| 'short' \| 'narrow'` | The unit display |
# Format Number
```tsx
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberBasic = () => {
return (
)
}
```
## Usage
The number formatting logic is handled by the native `Intl.NumberFormat` API and
smartly cached to avoid performance issues when using the same locale and
options.
```jsx
import { FormatNumber } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Percentage
Use the `style=percentage` prop to change the number format to percentage.
```tsx
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithPercentage = () => {
return (
)
}
```
### Currency
Use the `style=currency` prop to change the number format to currency.
```tsx
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithCurrency = () => {
return (
)
}
```
### Locale
Wrap the `FormatNumber` component within the `LocaleProvider` to change the
locale.
```tsx
import { FormatNumber, HStack, LocaleProvider, Text } from "@chakra-ui/react"
export const FormatNumberWithLocale = () => {
return (
de-DEzh-CN
)
}
```
### Unit
Use the `style=unit` prop to change the number format to unit.
```tsx
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithUnit = () => {
return (
)
}
```
### Compact Notation
Use the `notation=compact` prop to change the number format to compact notation.
```tsx
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithCompact = () => {
return (
)
}
```
## Props
The `FormatNumber` component supports all `Intl.NumberFormat` options in
addition to the following props:
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | undefined | `number` | The number to format |
# Grid
```tsx
import { Grid } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const GridBasic = () => {
return (
)
}
```
## Usage
```jsx
import { Grid, GridItem } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Col Span
Pass `colSpan` prop to `GridItem` to span across columns.
```tsx
import { Grid, GridItem } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const GridWithColSpan = () => {
return (
)
}
```
### Spanning Columns
In some layouts, you may need certain grid items to span specific amount of
columns or rows instead of an even distribution
```tsx
import { Grid, GridItem } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const GridSpanningColumns = () => {
return (
rowSpan=2colSpan=2colSpan=2colSpan=4
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| templateColumns | undefined | `SystemStyleObject['gridTemplateColumns']` | undefined |
| autoFlow | undefined | `SystemStyleObject['gridAutoFlow']` | undefined |
| autoRows | undefined | `SystemStyleObject['gridAutoRows']` | undefined |
| autoColumns | undefined | `SystemStyleObject['gridAutoColumns']` | undefined |
| templateRows | undefined | `SystemStyleObject['gridTemplateRows']` | undefined |
| templateAreas | undefined | `SystemStyleObject['gridTemplateAreas']` | undefined |
| column | undefined | `SystemStyleObject['gridColumn']` | undefined |
| row | undefined | `SystemStyleObject['gridRow']` | undefined |
| inline | undefined | `boolean` | undefined |
# Group
```tsx
import { Group } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"
export const GroupBasic = () => {
return (
1
2
)
}
```
## Usage
```jsx
import { Group } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Button
Here's an example of using the `Group` component to group buttons together.
```tsx
import { Button, Group } from "@chakra-ui/react"
export const GroupWithButton = () => {
return (
)
}
```
### Attached
Use the `attached` prop to attach the children together.
```tsx
import { Badge, Button, Group, Stack } from "@chakra-ui/react"
export const GroupWithAttached = () => {
return (
Commit status
90+
)
}
```
**Note:** When composing custom components and attaching them to a `Group`,
ensure you forward props.
```tsx {10} /{...props}/
export const Demo = () => {
return (
Two
)
}
function FocusButton(props: ButtonProps) {
return (
)
}
```
### Grow
Use the `grow` prop to make the children grow to fill the available space.
```tsx
import { Button, Group } from "@chakra-ui/react"
export const GroupWithGrow = () => {
return (
)
}
```
## Props
# Heading
```tsx
import { Heading } from "@chakra-ui/react"
export const HeadingBasic = () => {
return The quick brown fox jumps over the lazy dog
}
```
## Usage
```js
import { Heading } from "@chakra-ui/react"
```
```jsx
I'm a Heading
```
## Examples
### Sizes
Use the `size` prop to change the size of the heading component.
```tsx
import { Heading, Stack } from "@chakra-ui/react"
export const HeadingWithSizes = () => {
return (
Heading (sm)Heading (md)Heading (lg)Heading (xl)Heading (2xl)Heading (3xl)Heading (4xl)Heading (5xl)Heading (6xl)
)
}
```
### Highlight
Compose the `Heading` component with the `Highlight` component to highlight
text.
```tsx
import { Heading, Highlight, Stack, Text } from "@chakra-ui/react"
export const HeadingWithHighlight = () => {
return (
Create accessible React apps with speed
Chakra UI is a simple, modular and accessible component library that
gives you the building blocks you need.
)
}
```
### As another element
Use the `as` prop to render the heading as another HTML element.
```tsx
import { Heading, Stack } from "@chakra-ui/react"
export const HeadingWithAsProp = () => {
return (
Level 1Level 2Level 3
)
}
```
### Weights
Use the `fontWeight` prop to change the weight of the heading component.
```tsx
import { Heading, Stack } from "@chakra-ui/react"
export const HeadingWithWeights = () => {
return (
NormalMediumSemiboldBold
)
}
```
### Composition
Use the `Heading` component to compose other components.
```tsx
import { Button, Heading, Stack, Text } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"
export const HeadingWithComposition = () => {
return (
Modern payments for Stores
PayMe helps startups get paid by anyone, anywhere in the world
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | xl | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl' \| '7xl'` | The size of the component |
# Highlight
```tsx
import { Highlight } from "@chakra-ui/react"
export const HighlightBasic = () => {
return (
With the Highlight component, you can spotlight words.
)
}
```
## Usage
```jsx
import { Highlight } from "@chakra-ui/react"
```
```jsx
Hello World
```
## Examples
### Multiple
Pass an array of strings to the `query` prop to highlight multiple substrings.
```tsx
import { Heading, Highlight } from "@chakra-ui/react"
export const HighlightMultiple = () => {
return (
With the Highlight component, you can spotlight, emphasize and
accentuate words.
)
}
```
### Custom Style
Use the `styles` prop to customize the style of the highlighted text.
```tsx
import { Highlight } from "@chakra-ui/react"
export const HighlightWithCustomStyle = () => {
return (
With the Highlight component, you can spotlight words.
)
}
```
### Search Query
Use the highlight component to highlight search query results.
```tsx
import { Highlight, Stack, Text } from "@chakra-ui/react"
const query = "spot"
const results = ["Spotlight bulb", "Spot cleaner", "Spot ceiling"]
export const HighlightSearchQuery = () => {
return (
Search result for: spot
{results.map((item) => (
{item}
))}
)
}
```
### With Squiggle
Here's an example of how to render a custom squiggle image around the
highlighted text. Useful for a more fancy effect.
```tsx
"use client"
import { Heading, Mark, useHighlight } from "@chakra-ui/react"
import { Fragment } from "react"
export const HighlightWithSquiggle = () => {
const chunks = useHighlight({
text: "Endless scale, powered by real humans.",
query: ["endless", "real humans."],
})
return (
{chunks.map((chunk, index) => {
return chunk.match ? (
{chunk.text}
) : (
{chunk.text}
)
})}
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| query | undefined | `string \| string[]` | The query to highlight in the text |
| text | undefined | `string` | The text to highlight |
| ignoreCase | undefined | `boolean` | Whether to ignore case while matching |
| matchAll | undefined | `boolean` | Whether to match multiple instances of the query |
| styles | undefined | `SystemStyleObject` | undefined |
# Hover Card
```tsx
import {
Avatar,
HStack,
HoverCard,
Icon,
Link,
Portal,
Stack,
Text,
} from "@chakra-ui/react"
import { LuChartLine } from "react-icons/lu"
export const HoverCardBasic = () => {
return (
@chakra_ui
Chakra UI
The most powerful toolkit for building modern web
applications.
2.5M Downloads
)
}
```
## Usage
```jsx
import { HoverCard } from "@chakra-ui/react"
```
```jsx
```
## Shortcuts
The `HoverCard` provides a shortcuts for common use cases.
### Arrow
The `HoverCard.Arrow` renders the `HoverCard.ArrowTip` component within in by
default.
This works:
```jsx
```
This might be more concise, if you don't need to customize the arrow tip.
```jsx
```
## Examples
### Controlled
Use the `open` and `onOpenChange` to control the visibility of the hover card.
```tsx
"use client"
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
import { useState } from "react"
export const HoverCardControlled = () => {
const [open, setOpen] = useState(false)
return (
setOpen(e.open)}>
@chakra_ui
Chakra is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
)
}
```
### Delays
Control the open and close delays using the `openDelay` and `closeDelay` props.
```tsx
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
export const HoverCardWithDelay = () => {
return (
@chakra_ui
Chakra is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
)
}
```
### Placement
Use the `positioning.placement` prop to configure the underlying `floating-ui`
positioning logic.
```tsx
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
export const HoverCardWithPlacement = () => {
return (
@chakra_ui
Chakra is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
)
}
```
### Within Dialog
Here's an example of how to use the `HoverCard` within a `Dialog` component.
> Due to the focus trap within the dialog, it's important to change the portal
> target from the document's body to the dialog's content.
```tsx
"use client"
import {
Button,
CloseButton,
Dialog,
HoverCard,
Link,
Portal,
Stack,
Text,
} from "@chakra-ui/react"
import { useRef } from "react"
export const HoverCardInDialog = () => {
const contentRef = useRef(null)
return (
Select in Dialog
@chakra_ui
Chakra UI
The most powerful toolkit for building modern web
applications.
)
}
```
Alternatively, you can avoid portalling the `HoverCard.Positioner`
## Accessibility
HoverCard should be used solely for supplementary information that is not
essential for understanding the context.
It is inaccessible to screen readers and cannot be activated via keyboard, so
avoid placing crucial content within it.
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| closeDelay | 300 | `number` | The duration from when the mouse leaves the trigger or content until the hover card closes. |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| openDelay | 700 | `number` | The duration from when the mouse enters the trigger until the hover card opens. |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| defaultOpen | undefined | `boolean` | The initial open state of the hover card when it is first rendered.
Use when you do not need to control its open state. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n trigger: string\n content: string\n positioner: string\n arrow: string\n}>` | The ids of the elements in the popover. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Function called when the hover card opens or closes. |
| open | undefined | `boolean` | Whether the hover card is open |
| positioning | undefined | `PositioningOptions` | The user provided options used to position the popover content |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
```
# Icon Button
```tsx
import { IconButton } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"
export const IconButtonBasic = () => {
return (
)
}
```
## Usage
```jsx
import { IconButton } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the button.
```tsx
import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
export const IconButtonWithSizes = () => {
return (
{(size) => (
{size}
)}
)
}
```
### Variants
Use the `variant` prop to change its visual style
```tsx
import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"
export const IconButtonWithVariants = () => {
return (
{(variant) => (
{variant}
)}
)
}
```
### Color
Use the `colorPalette` prop to change the color of the button
```tsx
import { For, HStack, IconButton } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"
export const IconButtonWithColors = () => {
return (
{(c) => (
)}
)
}
```
### Rounded
Set `rounded="full"` to make the button fully rounded
```tsx
import { IconButton } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"
export const IconButtonRounded = () => {
return (
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | solid | `'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` | The variant of the component |
# Icon
```tsx
import { Icon } from "@chakra-ui/react"
import { HiHeart } from "react-icons/hi"
export const IconBasic = () => (
)
```
## Usage
```jsx
import { Icon } from "@chakra-ui/react"
```
```jsx
```
:::warning
Chakra doesn't provide any icons out of the box. Use popular icon libraries like
[react-icons](https://react-icons.github.io/react-icons/) or
[lucide-react](https://lucide.dev/react/)
:::
## Examples
### React Icons
Integrate with popular react icon libraries like `react-icons`
```tsx
import { Icon } from "@chakra-ui/react"
import { Md3dRotation } from "react-icons/md"
export const IconWithReactIcon = () => (
)
```
### Custom svg
Use the `asChild` prop to render custom svg icons within the `Icon` component
```tsx
import { Icon } from "@chakra-ui/react"
export const IconWithCustomSvg = () => {
return (
)
}
```
### Create Icon
Use the `createIcon` utility to create custom icons
```tsx
"use client"
import { createIcon } from "@chakra-ui/react"
const HeartIcon = createIcon({
displayName: "HeartIcon",
path: (
<>
),
})
export const IconWithCreateIcon = () => {
return
}
```
# Image
```tsx
import { Image } from "@chakra-ui/react"
export const ImageBasic = () => (
)
```
## Usage
```js
import { Image } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Height
Use the `height` prop to change the height of the image component.
```tsx
import { Image } from "@chakra-ui/react"
export const ImageWithHeight = () => {
return (
)
}
```
### Circular
Here's an example of how to render a circular image.
```tsx
import { Image } from "@chakra-ui/react"
export const ImageCircular = () => (
)
```
### Aspect Ratio
Use the `aspectRatio` prop to change the aspect ratio of the image component.
```tsx
import { Image } from "@chakra-ui/react"
export const ImageWithAspectRatio = () => {
return (
)
}
```
### Fit
By default, the image applies `object-fit: cover`. Use the `fit` prop to change
the fit of the image component.
```tsx
import { Image } from "@chakra-ui/react"
export const ImageWithFit = () => (
)
```
### HTML Width and Height
Use the `htmlWidth` and `htmlHeight` props to set the native width and height of
the image component.
```tsx
import { Image } from "@chakra-ui/react"
export const ImageWithHtmlHeight = () => {
return (
)
}
```
### Next.js Image
Use the `asChild` prop to render the image as a child of the `Image` component.
```jsx
// import NextImage from "next/image"
```
## Props
The `Image` component supports all native props for the `img` element.
# Input
```tsx
import { Input } from "@chakra-ui/react"
export const InputBasic = () => {
return
}
```
## Usage
```tsx
import { Input } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Variants
Use the `variant` prop to change the visual style of the input.
```tsx
import { Input, Stack } from "@chakra-ui/react"
export const InputWithVariants = () => {
return (
)
}
```
### Sizes
Use the `size` prop to change the size of the input.
```tsx
import { Input, Stack } from "@chakra-ui/react"
export const InputWithSizes = () => {
return (
)
}
```
### Helper Text
Pair the input with the `Field` component to add helper text.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const InputWithHelperText = () => {
return (
Email We'll never share your email.
)
}
```
### Error Text
Pair the input with the `Field` component to add error text.
```tsx
import { Field, Input } from "@chakra-ui/react"
export const InputWithErrorText = () => {
return (
EmailThis field is required
)
}
```
### Field
Compose the input with the `Field` component to add a label, helper text, and
error text.
```tsx
import { Field, HStack, Input } from "@chakra-ui/react"
export const InputWithField = () => {
return (
Email
Email
)
}
```
### Hook Form
Here's an example of how to integrate the input with `react-hook-form`.
```tsx
"use client"
import { Button, Field, Input, Stack } from "@chakra-ui/react"
import { useForm } from "react-hook-form"
interface FormValues {
firstName: string
lastName: string
}
export const InputWithHookForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Element
Use the `startElement` and `endElement` on the `InputGroup` component to add an
element to the start and end of the input.
#### Start Icon
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
import { LuUser } from "react-icons/lu"
export const InputWithStartIcon = () => {
return (
}>
)
}
```
#### Start Text
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
export const InputWithStartText = () => {
return (
)
}
```
#### Start and End Text
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
export const InputWithStartAndEndText = () => {
return (
)
}
```
#### Kbd
```tsx
import { Input, InputGroup, Kbd } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"
export const InputWithKbd = () => (
} endElement={⌘K}>
)
```
#### Select
```tsx
import { Input, InputGroup, NativeSelect } from "@chakra-ui/react"
const DomainSelect = () => (
)
export const InputWithSelect = () => {
return (
}>
)
}
```
### Addon
Use the `InputAddon` and `Group` components to add an addon to the input.
#### Start Addon
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
export const InputWithStartAddon = () => {
return (
)
}
```
#### End Addon
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
export const InputWithEndAddon = () => {
return (
)
}
```
#### Start and End Addon
```tsx
import { Input, InputGroup } from "@chakra-ui/react"
export const InputWithStartAndEndAddon = () => {
return (
)
}
```
### Disabled
Use the `disabled` prop to disable the input.
```tsx
import { Input } from "@chakra-ui/react"
export const InputWithDisabled = () => {
return
}
```
### Button
Use the `Group` component to attach a button to the input.
```tsx
import { Button, Group, Input } from "@chakra-ui/react"
export const InputWithEndButton = () => {
return (
)
}
```
### Focus and Error Color
Use the `--focus-color` and `--error-color` CSS custom properties to change the
color of the input when it is focused or in an error state.
```tsx
import { Field, Input, Stack } from "@chakra-ui/react"
export const InputWithFocusErrorColor = () => {
return (
focusColor=limeerrorColor=greenerrorColor=blue
)
}
```
### Placeholder Style
Use the `_placeholder` prop to style the placeholder text.
```tsx
import { Input } from "@chakra-ui/react"
export const InputWithPlaceholderStyle = () => {
return (
)
}
```
### Floating Label
Here's an example of how to build a floating label to the input.
```tsx
import { Box, Field, Input, defineStyle } from "@chakra-ui/react"
export const InputWithFloatingLabel = () => {
return (
Email
)
}
const floatingStyles = defineStyle({
pos: "absolute",
bg: "bg",
px: "0.5",
top: "-3",
insetStart: "2",
fontWeight: "normal",
pointerEvents: "none",
transition: "position",
_peerPlaceholderShown: {
color: "fg.muted",
top: "2.5",
insetStart: "3",
},
_peerFocusVisible: {
color: "fg",
top: "-3",
insetStart: "2",
},
})
```
### Mask
Here's an example of using the `use-mask-input` library to mask the input shape.
```tsx
"use client"
import { Input } from "@chakra-ui/react"
import { withMask } from "use-mask-input"
export const InputWithMask = () => {
return (
)
}
```
### Character Counter
Here's an example of how to add a character counter to the input.
```tsx
"use client"
import { Input, InputGroup, Span } from "@chakra-ui/react"
import { useState } from "react"
const MAX_CHARACTERS = 20
export const InputWithCharacterCounter = () => {
const [value, setValue] = useState("")
return (
{value.length} / {MAX_CHARACTERS}
}
>
{
setValue(e.currentTarget.value.slice(0, MAX_CHARACTERS))
}}
/>
)
}
```
### Card Number
Here's an example of using `react-payment-inputs` to create a card number input.
```tsx
"use client"
import { Input, InputGroup } from "@chakra-ui/react"
import { LuCreditCard } from "react-icons/lu"
import { usePaymentInputs } from "react-payment-inputs"
export const InputWithCardNumber = () => {
const { wrapperProps, getCardNumberProps } = usePaymentInputs()
return (
}>
)
}
```
You can create a full card inputs for a card number, expiry date, and CVC.
```tsx
"use client"
import { Box, Group, Input, InputGroup, Show } from "@chakra-ui/react"
import { LuCreditCard } from "react-icons/lu"
import { usePaymentInputs } from "react-payment-inputs"
import cardImages, { type CardImages } from "react-payment-inputs/images"
const images = cardImages as unknown as CardImages
const CardImage = (props: ReturnType) => {
const { meta, getCardImageProps } = props
return (
}
>
)
}
export const InputWithCardDetails = () => {
const payment = usePaymentInputs()
return (
}
>
)
}
```
### Clear Button
Combine the `Input` and `CloseButton` components to create a clear button. This
is useful for building search inputs.
```tsx
"use client"
import { CloseButton, Input, InputGroup } from "@chakra-ui/react"
import { useRef, useState } from "react"
export const InputWithClearButton = () => {
const [value, setValue] = useState("Initial value")
const inputRef = useRef(null)
const endElement = value ? (
{
setValue("")
inputRef.current?.focus()
}}
me="-2"
/>
) : undefined
return (
{
setValue(e.currentTarget.value)
}}
/>
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | outline | `'outline' \| 'subtle' \| 'flushed'` | The variant of the component |
# Kbd
```tsx
import { Kbd } from "@chakra-ui/react"
export const KbdBasic = () => {
return Shift + Tab
}
```
## Usage
```jsx
import { Kbd } from "@chakra-ui/react"
```
```jsx
F12
```
## Examples
### Combinations
Render `Kbd` to showcase key combinations
```tsx
import { HStack, Kbd } from "@chakra-ui/react"
export const KbdWithCombinations = () => {
return (
ctrl+shift+del
)
}
```
### Function Keys
Here's an example of using `Kbd` to showcase function keys
```tsx
import { HStack, Kbd } from "@chakra-ui/react"
export const KbdFunctionKeys = () => {
return (
⌘⌥⇧⌃
)
}
```
### Variants
Use the `variant` prop to change the appearance of the `Kbd` component
```tsx
import { HStack, Kbd } from "@chakra-ui/react"
export const KbdWithVariants = () => {
return (
Shift + TabShift + TabShift + TabShift + Tab
)
}
```
### Sizes
Use the `size` prop to change the size of the `Kbd` component
```tsx
import { HStack, Kbd } from "@chakra-ui/react"
export const KbdWithSizes = () => {
return (
Shift + TabShift + TabShift + Tab
)
}
```
### Within Text
Use `Kbd` within text to highlight key combinations
```tsx
import { Kbd, Text } from "@chakra-ui/react"
export const KbdWithinText = () => {
return (
Press F12 to open DevTools
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | raised | `'raised' \| 'outline' \| 'subtle' \| 'plain'` | The variant of the component |
| size | md | `'sm' \| 'md' \| 'lg'` | The size of the component |
# Link Overlay
```tsx
import { Heading, Link, LinkOverlay, Stack, Text } from "@chakra-ui/react"
export const LinkOverlayBasic = () => {
return (
Wanna try it out?
This entire area is a link. Click it to see the effect.
Click me
)
}
```
## Usage
The `LinkOverlay` component provides a semantic way to link an entire component
or card.
```jsx
import { LinkBox, LinkOverlay } from "@chakra-ui/react"
```
```jsx
```
## Examples
### Article
Here's an example of using `LinkOverlay` to link an entire article.
```tsx
import {
Heading,
Link,
LinkBox,
LinkOverlay,
Span,
Text,
} from "@chakra-ui/react"
export const LinkOverlayArticle = () => {
return (
Chakra V3 Workshop
Catch up on whats been cooking at Chakra UI and explore some of the
popular community resources.
Inner Link
)
}
```
### Custom Link
Use the `asChild` prop to add support for custom Link component like `next/link`
or react router's `Link`
```jsx
import { LinkBox, LinkOverlay } from "@chakra-ui/react"
import NextLink from "next/link"
function Example() {
return (
Blog Post Title
Some blog post content
Some inner link
)
}
```
## Caveat
One of the side-effects of this technique is that the content can't be
"selectable" (i.e. with a pointing device), however, this seems to be pretty
uncommon in web design.
# Link
```tsx
import { Link } from "@chakra-ui/react"
export const LinkBasic = () => {
return Visit Chakra UI
}
```
## Usage
```jsx
import { Link } from "@chakra-ui/react"
```
```jsx
Click here
```
## Examples
### Variants
Use the `variant` prop to change the appearance of the `Link` component
```tsx
import { Link, Stack } from "@chakra-ui/react"
export const LinkWithVariants = () => {
return (
Link (Underline)
Link (Plain)
)
}
```
### Within Text
Use `Link` within a text to create a hyperlink
```tsx
import { Link, Text } from "@chakra-ui/react"
export const LinkWithinText = () => {
return (
Visit the{" "}
Chakra UI
{" "}
website
)
}
```
### External
Add an external link icon to the `Link` component
```tsx
import { Link } from "@chakra-ui/react"
import { LuExternalLink } from "react-icons/lu"
export const LinkWithExternal = () => {
return (
Visit Chakra UI
)
}
```
### Routing Library
Use the `asChild` prop to compose `Link` with framework links like (Next.js)
```jsx
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
const Demo = () => {
return (
Click here
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | plain | `'underline' \| 'plain'` | The variant of the component |
# List
```tsx
import { List } from "@chakra-ui/react"
export const ListBasic = () => (
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
)
```
## Usage
```jsx
import { List } from "@chakra-ui/react"
```
```jsx
Item 1Item 2
```
## Examples
### Ordered
Pass the `as="ol"` prop to create an ordered list
```tsx
import { List } from "@chakra-ui/react"
export const ListOrdered = () => {
return (
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
)
}
```
### Icon
Use the `List.Indicator` component to add an icon to the list
```tsx
import { List } from "@chakra-ui/react"
import { LuCircleCheck, LuCircleDashed } from "react-icons/lu"
export const ListWithIcon = () => {
return (
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
)
}
```
### Nested
Here's an example of a nested list
```tsx
import { List } from "@chakra-ui/react"
export const ListNested = () => {
return (
First order itemFirst order item
First order item with list
Nested itemNested itemNested itemFirst order item
)
}
```
### Marker Style
Use the `_marker` prop to style the marker of the list
```tsx
import { List } from "@chakra-ui/react"
const items = [
"Your failure to comply with any provision of these Terms of Service;",
"Your use of the Services, including but not limited to economic, physical, emotional, psychological or privacy related considerations; and",
"Your actions to knowingly affect the Services via any bloatware, malware, computer virus, worm, Trojan horse, spyware, adware, crimeware, scareware, rootkit or any other program installed in a way that executable code of any program is scheduled to utilize or utilizes processor cycles during periods of time when such program is not directly or indirectly being used.",
]
export const ListWithMarkerStyle = () => {
return (
{items.map((item, index) => (
{item}
))}
)
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | marker | `'marker' \| 'plain'` | The variant of the component |
| align | undefined | `'center' \| 'start' \| 'end'` | The align of the component |
# Locale Provider
## Usage
The `LocaleProvider` component sets the locale for your app, formatting dates,
numbers, and other locale-specific data.
> Most Chakra UI components that read the locale set by the `LocaleProvider`.
```jsx
import { LocaleProvider, useLocaleContext } from "@chakra-ui/react"
```
```jsx
{/* Your App */}
```
## Examples
### Setting Locale
Set the `locale` prop to the locale you want to use.
```jsx
```
### Reading Locale
```jsx
export const Usage = () => {
const { locale, dir } = useLocaleContext()
return
{JSON.stringify({ locale, dir }, null, 2)}
}
```
## Props
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| locale | 'en-US' | `string` | The locale to use for the application. |
# Mark
```tsx
import { Mark, Text } from "@chakra-ui/react"
export const MarkBasic = () => {
return (
The design system is a collection of UI
elements
)
}
```
## Usage
```js
import { Mark } from "@chakra-ui/react"
```
```jsx
The design system is a collection of UI elements
```
## Examples
### Variants
Use the `variant` prop to change the color of the mark.
## Props
# Menu
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuBasic = () => {
return (
New Text FileNew File...New WindowOpen File...Export
)
}
```
## Usage
```tsx
import { Menu } from "@chakra-ui/react"
```
```tsx
```
## Examples
### Command
Use the `Menu.ItemCommand` component to display a command in the menu.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuWithCommand = () => {
return (
New Text File ⌘E
New File... ⌘N
New Window ⌘W
Open File... ⌘O
Export ⌘S
)
}
```
### Context menu
Use the `Menu.ContextTrigger` component to create a context menu.
```tsx
import { Center, Menu, Portal } from "@chakra-ui/react"
export const MenuWithContextTrigger = () => {
return (
Right click here
New Text FileNew File...New WindowOpen File...Export
)
}
```
### Group
Use the `Menu.ItemGroup` component to group related menu items.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuWithGroup = () => {
return (
StylesBoldUnderlineAlignLeftMiddleRight
)
}
```
### Danger Item
Here's an example of how to style a menu item that is used to delete an item.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuWithDangerItem = () => {
return (
RenameExport
Delete...
)
}
```
### Submenu
Here's an example of how to create a submenu.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
import { LuChevronRight } from "react-icons/lu"
export const MenuWithSubmenu = () => {
return (
New Text FileNew File...
Open Recent PandaArk UIChakra v3Open File...Export
)
}
```
### Links
Pass the `asChild` prop to the `Menu.Item` component to render a link.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuWithLinks = () => {
return (
{links.map((link) => (
{link.title}
))}
)
}
const links = [
{
title: "Naruto",
href: "https://www.crunchyroll.com/naruto",
},
{
title: "One Piece",
href: "https://www.crunchyroll.com/one-piece",
},
{
title: "Attack on Titan",
href: "https://www.crunchyroll.com/attack-on-titan",
},
]
```
When using custom router links, you need to set the `navigate` prop on the
`Menu.Root` component.
```tsx
"use client"
import { Menu } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"
const Demo = () => {
const navigate = useNavigate()
return (
navigate(`/${value}`)}>
{/* ... */}
)
}
```
### Radio Items
Here's an example of how to create a menu with radio items.
```tsx
"use client"
import { Button, Menu, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { HiSortAscending } from "react-icons/hi"
export const MenuWithRadioItems = () => {
const [value, setValue] = useState("asc")
return (
setValue(e.value)}
>
{items.map((item) => (
{item.label}
))}
)
}
const items = [
{ label: "Ascending", value: "asc" },
{ label: "Descending", value: "desc" },
]
```
### Checkbox Items
Here's an example of how to create a menu with checkbox items.
```tsx
"use client"
import { Button, Menu, Portal, useCheckboxGroup } from "@chakra-ui/react"
import { HiCog } from "react-icons/hi"
export const MenuWithCheckboxItems = () => {
const group = useCheckboxGroup({ defaultValue: ["autosave"] })
return (
Features
{items.map(({ title, value }) => (
group.toggleValue(value)}
>
{title}
))}
)
}
const items = [
{ title: "Autosave", value: "autosave" },
{ title: "Detect Language", value: "detect-language" },
{ title: "Spellcheck", value: "spellcheck" },
]
```
### Icon and Command
Compose the menu to include icons and commands.
```tsx
import { Box, Button, Menu, Portal } from "@chakra-ui/react"
import { LuClipboardPaste, LuCopy, LuScissors } from "react-icons/lu"
export const MenuWithIconAndCommand = () => {
return (
Cut⌘XCopy⌘CPaste⌘V
)
}
```
### Placement
Use the `positioning.placement` prop to control the placement of the menu.
```tsx
import { Button, Menu, Portal } from "@chakra-ui/react"
export const MenuWithPlacement = () => {
return (
New Text FileNew File...New WindowOpen File...Export
)
}
```
### Anchor Point
Use the `positioning.anchorPoint` prop to control the anchor point of the menu.
You can derive it from the `getBoundingClientRect` of a DOM element, or use
something like `DOMRect.fromRect({ x: 0, y: 0, width: 1, height: 1 })` to create
a new rect.
```tsx
"use client"
import { Box, Button, Menu, Portal } from "@chakra-ui/react"
import { useRef } from "react"
export const MenuWithAnchorRect = () => {
const ref = useRef(null)
const getAnchorRect = () => ref.current!.getBoundingClientRect()
return (
Anchor
New Text FileNew File...New WindowOpen File...Export
)
}
```
### Mixed Layout
Here's an example of how to create a mixed layout of menu items. In this layout,
the top horizontal menu includes common menu items.
```tsx
import { Box, Button, Group, Menu, Portal } from "@chakra-ui/react"
import {
LuClipboard,
LuCopy,
LuFileSearch,
LuMessageSquare,
LuScissors,
LuShare,
} from "react-icons/lu"
const horizontalMenuItems = [
{ label: "Cut", value: "cut", icon: },
{ label: "Copy", value: "copy", icon: },
{ label: "Paste", value: "paste", icon: },
]
const verticalMenuItems = [
{ label: "Look Up", value: "look-up", icon: },
{ label: "Translate", value: "translate", icon: },
{ label: "Share", value: "share", icon: },
]
export const MenuWithMixedLayout = () => {
return (
{horizontalMenuItems.map((item) => (
{item.icon}
{item.label}
))}
{verticalMenuItems.map((item) => (
{item.label}
{item.icon}
))}
)
}
```
### Hide When Detached
When the menu is rendered in an scrolling container, set the
`positioning.hideWhenDetached` to `true` to hide the menu when the trigger is
scrolled out of view.
```tsx
import { Box, Center, Flex, Menu, Portal, Text } from "@chakra-ui/react"
export const MenuWithHideWhenDetached = () => {
return (
{[...Array(6).keys()].map((x) => (
Item{x}
))}
Menu
New Text FileNew File...New WindowOpen File...Export
)
}
```
### Within Dialog
Here's an example of how to use the menu within a `Dialog` or `Drawer`
component.
> Due to the focus trap within the dialog, it's important to change the portal
> target from the document's body to the dialog's content.
Alternatively, you can avoid portalling the `Menu.Positioner`
```tsx
"use client"
import { Button, Dialog, Menu, Portal } from "@chakra-ui/react"
import { useRef } from "react"
import Lorem from "react-lorem-ipsum"
export const MenuWithinDialog = () => {
const contentRef = useRef(null)
return (
Welcome to the menuNew Text FileNew File...New WindowOpen File...Export
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| closeOnSelect | true | `boolean` | Whether to close the menu when an option is selected |
| composite | true | `boolean` | Whether the menu is a composed with other composite widgets like a combobox or tabs |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| loopFocus | false | `boolean` | Whether to loop the keyboard navigation. |
| typeahead | true | `boolean` | Whether the pressing printable characters should trigger typeahead navigation |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | subtle | `'subtle' \| 'solid'` | The variant of the component |
| size | md | `'sm' \| 'md'` | The size of the component |
| anchorPoint | undefined | `Point` | The positioning point for the menu. Can be set by the context menu trigger or the button trigger. |
| aria-label | undefined | `string` | The accessibility label for the menu |
| defaultOpen | undefined | `boolean` | The initial open state of the menu when it is first rendered.
Use when you do not need to control its open state. |
| highlightedValue | undefined | `string` | The value of the highlighted menu item. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n trigger: string\n contextTrigger: string\n content: string\n groupLabel(id: string): string\n group(id: string): string\n positioner: string\n arrow: string\n}>` | The ids of the elements in the menu. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| navigate | undefined | `(details: NavigateDetails) => void` | Function to navigate to the selected item if it's an anchor element |
| onEscapeKeyDown | undefined | `(event: KeyboardEvent) => void` | Function called when the escape key is pressed |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onHighlightChange | undefined | `(details: HighlightChangeDetails) => void` | Function called when the highlighted menu item changes. |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Function called when the menu opens or closes |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| onSelect | undefined | `(details: SelectionDetails) => void` | Function called when a menu item is selected. |
| open | undefined | `boolean` | Whether the menu is open |
| positioning | undefined | `PositioningOptions` | The options used to dynamically position the menu |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
### Item
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| value | undefined | `string` | The unique value of the menu item option. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| closeOnSelect | undefined | `boolean` | Whether the menu should be closed when the option is selected. |
| disabled | undefined | `boolean` | Whether the menu item is disabled |
| valueText | undefined | `string` | The textual value of the option. Used in typeahead navigation of the menu.
If not provided, the text content of the menu item will be used. |
# Select (Native)
```tsx
import { NativeSelect } from "@chakra-ui/react"
export const NativeSelectBasic = () => {
return (
)
}
```
## Usage
```jsx
import { NativeSelect } from "@chakra-ui/react"
```
```jsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Use the `size` prop to change the size of the select component.
```tsx
import { For, NativeSelect, Stack } from "@chakra-ui/react"
export const NativeSelectWithSizes = () => {
return (
{(size) => (
)}
)
}
```
### Variants
Use the `variant` prop to change the appearance of the select component.
```tsx
import { For, NativeSelect, Stack } from "@chakra-ui/react"
export const NativeSelectWithVariants = () => {
return (
{(variant) => (
)}
)
}
```
### Controlled
Use the `value` and `onChange` props to control the select component.
```tsx
"use client"
import { NativeSelect } from "@chakra-ui/react"
import { useState } from "react"
export const NativeSelectControlled = () => {
const [value, setValue] = useState("")
return (
setValue(e.currentTarget.value)}
>
)
}
```
### Disabled
Pass the `disabled` prop to the `NativeSelect.Root` component to disable the
select component.
```tsx
import { NativeSelect } from "@chakra-ui/react"
export const NativeSelectWithDisabled = () => (
)
```
### Invalid
Compose the native and `Field` component to set the invalid set and show the
error text.
```tsx
import { Field, NativeSelect } from "@chakra-ui/react"
export const NativeSelectWithInvalid = () => (
This is an error
)
```
Alternatively, you can use the `invalid` prop on the `NativeSelect.Root`
component as well.
```tsx
import { NativeSelect } from "@chakra-ui/react"
export const NativeSelectWithInvalidRoot = () => (
)
```
### Hook Form
Here is an example of how to use the `NativeSelect` component with
`react-hook-form`.
```tsx
"use client"
import { Button, Field, NativeSelect } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
framework: z.string().min(1, { message: "Framework is required" }),
})
type FormValues = z.infer
export const NativeSelectWithHookForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Ref
Here's how to access the underlying element reference
```tsx
import { NativeSelect } from "@chakra-ui/react"
const Demo = () => {
const ref = useRef(null)
return (
)
}
```
### Closed Component
Here's how to setup the Native Select for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add native-select
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | outline | `'outline' \| 'subtle' \| 'plain'` | The variant of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The size of the component |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Number Input
```tsx
import { NumberInput } from "@chakra-ui/react"
export const NumberInputBasic = () => {
return (
)
}
```
## Usage
```tsx
import { NumberInput } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Shortcuts
The `NumberInput` component provides a set of shortcuts for common use cases
### NumberInputControl
This component renders the `NumberInput.IncrementTrigger` and
`NumberInput.DecrementTrigger` within it by default.
Writing this:
```tsx
```
is shorthand for writing this if you don't need to customize the triggers:
```tsx
```
## Examples
### Sizes
Pass the `size` prop to the `NumberInput.Root` component to change the size of
the number input.
```tsx
import { For, NumberInput, Stack } from "@chakra-ui/react"
export const NumberInputWithSizes = () => {
return (
{(size) => (
)}
)
}
```
### Formatting
Pass the `formatOptions` prop to the `NumberInput.Root` component to format the
number input value. The value of this maps to `Intl.NumberFormatOptions` and is
applied based on the current locale.
```tsx
import { NumberInput, Stack } from "@chakra-ui/react"
export const NumberInputWithFormatOptions = () => {
return (
)
}
```
### Min and Max
Pass the `min` and `max` props to the `NumberInput.Root` component to set the
minimum and maximum values of the number input.
If value entered is less than `min` or greater than `max`, the value will be
clamped to the nearest boundary on blur, or enter key press.
```tsx
import { NumberInput } from "@chakra-ui/react"
export const NumberInputWithMinMax = () => {
return (
)
}
```
### Step
Pass the `step` prop to the `NumberInput.Root` component to change the increment
or decrement interval of the number input.
```tsx
import { NumberInput } from "@chakra-ui/react"
export const NumberInputWithStep = () => {
return (
)
}
```
### Controlled
Pass the `value` and `onValueChange` props to the `NumberInput.Root` component
to control the value of the number input.
```tsx
"use client"
import { NumberInput } from "@chakra-ui/react"
import { useState } from "react"
export const NumberInputControlled = () => {
const [value, setValue] = useState("10")
return (
setValue(e.value)}
>
)
}
```
### Mobile Stepper
Here's an example of how to compose the number input as a mobile stepper.
```tsx
import { HStack, IconButton, NumberInput } from "@chakra-ui/react"
import { LuMinus, LuPlus } from "react-icons/lu"
export const NumberInputWithStepper = () => {
return (
)
}
```
### Mouse Wheel
Pass the `allowMouseWheel` prop to the `NumberInput.Root` component to enable or
disable the mouse wheel to change
```tsx
import { NumberInput } from "@chakra-ui/react"
export const NumberInputWithMouseWheel = () => {
return (
)
}
```
### Disabled
Pass the `disabled` prop to the `NumberInput.Root` component to disable the
number input.
```tsx
import { NumberInput } from "@chakra-ui/react"
export const NumberInputWithDisabled = () => {
return (
)
}
```
### Invalid
Use the `Field` component and the `invalid` prop to indicate that the number
input is invalid.
```tsx
import { Field, NumberInput } from "@chakra-ui/react"
export const NumberInputWithInvalid = () => {
return (
Enter NumberThe entry is invalid
)
}
```
### Helper Text
Compose the `Field` and `Field.HelperText` components to add helper text to the
number input.
```tsx
import { Field, NumberInput } from "@chakra-ui/react"
export const NumberInputWithField = () => {
return (
Enter NumberEnter a number between 1 and 10
)
}
```
### Element
Here's an example of how to compose the number input with the input group
component to add an element on either the left or right.
```tsx
import { InputGroup, NumberInput } from "@chakra-ui/react"
import { LuDollarSign } from "react-icons/lu"
export const NumberInputWithElement = () => {
return (
}>
)
}
```
### Scrubber
Use the `NumberInput.Scrubber` component to make the number input supports
scrubber interactions.
```tsx
import { InputGroup, NumberInput } from "@chakra-ui/react"
import { LuArrowRightLeft } from "react-icons/lu"
export const NumberInputWithScrubber = () => {
return (
}
>
)
}
```
### Hook Form
Here is an example of how to use the `NumberInput` component with
`react-hook-form`.
```tsx
"use client"
import { Button, Field, NumberInput } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
number: z.string({ message: "Number is required" }),
})
type FormValues = z.infer
export const NumberInputWithHookForm = () => {
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Closed Component
Here's how to setup the Number Input for a closed component composition.
If you want to automatically add the closed component to your project, run the
command:
```bash
npx @chakra-ui/cli snippet add number-input
```
Here's how to use the it
```tsx
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| allowOverflow | true | `boolean` | Whether to allow the value overflow the min/max range |
| clampValueOnBlur | true | `boolean` | Whether to clamp the value when the input loses focus (blur) |
| focusInputOnChange | true | `boolean` | Whether to focus input when the value changes |
| inputMode | "decimal" | `InputMode` | Hints at the type of data that might be entered by the user. It also determines
the type of keyboard shown to the user on mobile devices |
| locale | "en-US" | `string` | The current locale. Based on the BCP 47 definition. |
| max | Number.MAX_SAFE_INTEGER | `number` | The maximum value of the number input |
| min | Number.MIN_SAFE_INTEGER | `number` | The minimum value of the number input |
| pattern | "[0-9]*(.[0-9]+)?" | `string` | The pattern used to check the element's value against |
| spinOnPress | true | `boolean` | Whether to spin the value when the increment/decrement button is pressed |
| step | 1 | `number` | The amount to increment or decrement the value by |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| variant | outline | `'outline' \| 'subtle' \| 'flushed'` | The variant of the component |
| allowMouseWheel | undefined | `boolean` | Whether to allow mouse wheel to change the value |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| defaultValue | undefined | `string` | The initial value of the number input when it is first rendered.
Use when you do not need to control the state of the number input. |
| disabled | undefined | `boolean` | Whether the number input is disabled. |
| form | undefined | `string` | The associate form of the input element. |
| formatOptions | undefined | `NumberFormatOptions` | The options to pass to the `Intl.NumberFormat` constructor |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n root: string\n label: string\n input: string\n incrementTrigger: string\n decrementTrigger: string\n scrubber: string\n}>` | The ids of the elements in the number input. Useful for composition. |
| invalid | undefined | `boolean` | Whether the number input value is invalid. |
| name | undefined | `string` | The name attribute of the number input. Useful for form submission. |
| onFocusChange | undefined | `(details: FocusChangeDetails) => void` | Function invoked when the number input is focused |
| onValueChange | undefined | `(details: ValueChangeDetails) => void` | Function invoked when the value changes |
| onValueInvalid | undefined | `(details: ValueInvalidDetails) => void` | Function invoked when the value overflows or underflows the min/max range |
| readOnly | undefined | `boolean` | Whether the number input is readonly |
| required | undefined | `boolean` | Whether the number input is required |
| translations | undefined | `IntlTranslations` | Specifies the localized strings that identifies the accessibility elements and their states |
| value | undefined | `string` | The value of the input |
# Pagination
```tsx
"use client"
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { LuChevronLeft, LuChevronRight } from "react-icons/lu"
export const PaginationBasic = () => {
return (
(
{page.value}
)}
/>
)
}
```
## Usage
```tsx
import { Pagination } from "@chakra-ui/react"
```
```tsx
```
## Shortcuts
The `Pagination` component also provides a set of shortcuts for common use
cases.
### PaginationItems
This component renders the number of pages based on the `count` and `pageSize`
props.
Rendering this:
```tsx
```
is shorthand for this:
```tsx
{({ pages }) =>
pages.map((page, index) =>
page.type === "page" ? (
) : (
),
)
}
```
## Examples
### Sizes
Use the `size` prop to change the size of the pagination.
:::info
The pagination sizes are mapped to the `Button` component sizes.
:::
```tsx
"use client"
import {
ButtonGroup,
For,
IconButton,
Pagination,
Stack,
} from "@chakra-ui/react"
import { LuChevronLeft, LuChevronRight } from "react-icons/lu"
export const PaginationWithSizes = () => {
return (
{(size) => (
(
{page.value}
)}
/>
)}
)
}
```
### Variants
Use the `variant` prop to control the variant of the pagination items and
ellipsis.
> The variant matches the `Button` component variant.
```tsx
"use client"
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { LuChevronLeft, LuChevronRight } from "react-icons/lu"
export const PaginationWithVariants = () => {
return (
(
{page.value}
)}
/>
)
}
```
### Controlled
Use the `page` and `onPageChange` props to control the current page.
```tsx
"use client"
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { useState } from "react"
import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
export const PaginationControlled = () => {
const [page, setPage] = useState(1)
return (
setPage(e.page)}
>
(
{page.value}
)}
/>
)
}
```
### Sibling Count
Use `siblingCount` to control the number of sibling pages to show before and
after the current page.
```tsx
"use client"
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { LuChevronLeft, LuChevronRight } from "react-icons/lu"
export const PaginationWithSiblingCount = () => {
return (
(
{page.value}
)}
/>
)
}
```
### Compact
Use the `Pagination.PageText` to create a compact pagination. This can be useful
for mobile views.
```tsx
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
export const PaginationCompact = () => {
return (
)
}
```
### As Link
Here's an example of rendering the pagination as links.
```tsx
"use client"
import {
ButtonGroup,
IconButton,
type IconButtonProps,
Pagination,
usePaginationContext,
} from "@chakra-ui/react"
import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
const PaginationLink = (
props: IconButtonProps & { page?: "prev" | "next" | number },
) => {
const { page, ...rest } = props
const pagination = usePaginationContext()
const pageValue = () => {
if (page === "prev") return pagination.previousPage
if (page === "next") return pagination.nextPage
return page
}
return (
{props.children}
)
}
export const PaginationAsLink = () => {
return (
(
{page.value}
)}
/>
)
}
```
### Attached
Here's an example of composing the pagination with the `Group` component to
attach the pagination items and triggers.
```tsx
"use client"
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
export const PaginationAttached = () => {
return (
(
{page.value}
)}
/>
)
}
```
### Count Text
Pass `format="long"` to the `Pagination.PageText` component to show the count
text.
```tsx
import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react"
import { LuChevronLeft, LuChevronRight } from "react-icons/lu"
export const PaginationWithCountText = () => {
return (
)
}
```
### Data Driven
Here's an example of controlling the pagination state and using the state to
chunk the data.
```tsx
"use client"
import {
ButtonGroup,
IconButton,
Pagination,
Stack,
Text,
} from "@chakra-ui/react"
import { useState } from "react"
import { HiChevronLeft, HiChevronRight } from "react-icons/hi"
const pageSize = 5
const count = 50
const items = new Array(count)
.fill(0)
.map((_, index) => `Lorem ipsum dolor sit amet ${index + 1}`)
export const PaginationWithContent = () => {
const [page, setPage] = useState(1)
const startRange = (page - 1) * pageSize
const endRange = startRange + pageSize
const visibleItems = items.slice(startRange, endRange)
return (
{visibleItems.map((item) => (
{item}
))}
setPage(e.page)}
>
(
{page.value}
)}
/>
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| count | undefined | `number` | Total number of data items |
| page | 1 | `number` | The active page |
| pageSize | 10 | `number` | Number of data items per page |
| siblingCount | 1 | `number` | Number of pages to show beside active page |
| type | "button" | `'button' \| 'link'` | The type of the trigger element |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| defaultPage | undefined | `number` | The initial page of the pagination when it is first rendered.
Use when you do not need to control the state of the pagination. |
| ids | undefined | `Partial<{\n root: string\n ellipsis(index: number): string\n prevTrigger: string\n nextTrigger: string\n item(page: number): string\n}>` | The ids of the elements in the accordion. Useful for composition. |
| onPageChange | undefined | `(details: PageChangeDetails) => void` | Called when the page number is changed |
| onPageSizeChange | undefined | `(details: PageSizeChangeDetails) => void` | Called when the page size is changed |
| translations | undefined | `IntlTranslations` | Specifies the localized strings that identifies the accessibility elements and their states |
# Password Input
```tsx
import { PasswordInput } from "@/components/ui/password-input"
export const PasswordInputBasic = () => {
return
}
```
## Setup
If you don't already have the snippet, run the following command to add the
`password-input` snippet
```sh
npx @chakra-ui/cli snippet add password-input
```
The snippet includes a closed component composition for the `PasswordInput`
component.
## Usage
```jsx
import {
PasswordInput,
PasswordStrengthMeter,
} from "@/components/ui/password-input"
```
```jsx
```
## Examples
### Sizes
Use the `size` prop to change the size of the password input.
:::info
The password input sizes are mapped to the `Input` component sizes.
:::
```tsx
import { Stack } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
export const PasswordInputWithSizes = () => {
return (
)
}
```
### Controlled
Use the `value` and `onChange` props to control the current page.
```tsx
"use client"
import { PasswordInput } from "@/components/ui/password-input"
import { useState } from "react"
export const PasswordInputControlled = () => {
const [value, setValue] = useState("")
return (
setValue(e.target.value)} />
)
}
```
### Hook Form
Here's an example of how to use the `PasswordInput` component with
`react-hook-form`.
```tsx
"use client"
import { Button, Field, Input, Stack } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
import { useForm } from "react-hook-form"
interface FormValues {
username: string
password: string
}
export const PasswordInputWithHookForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Controlled Visibility
Use the `visible` and `onVisibleChange` props to control the visibility of the
password input.
```tsx
"use client"
import { Stack, Text } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
import { useState } from "react"
export const PasswordInputControlledVisibility = () => {
const [visible, setVisible] = useState(false)
return (
Password is {visible ? "visible" : "hidden"}
)
}
```
### Strength Indicator
Render the `PasswordStrengthMeter` component to show the strength of the
password. Compute the `value` prop based on the password input `value`.
```tsx
import { Stack } from "@chakra-ui/react"
import {
PasswordInput,
PasswordStrengthMeter,
} from "@/components/ui/password-input"
export const PasswordInputWithStrengthIndicator = () => {
return (
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| defaultVisible | false | `boolean` | The default visibility state of the password input. |
| visible | undefined | `boolean` | The controlled visibility state of the password input. |
| onVisibleChange | undefined | `(visible: boolean) => void` | Callback invoked when the visibility state changes. |
| visibilityIcon | undefined | `{ on: React.ReactNode; off: React.ReactNode }` | Custom icons for the visibility toggle button. |
# Pin Input
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputBasic = () => {
return (
)
}
```
## Usage
```tsx
import { PinInput } from "@chakra-ui/react"
```
```tsx
```
:::info
If you prefer a closed component composition, check out the
[snippet below](#closed-component).
:::
## Examples
### Sizes
Pass the `size` prop to the `PinInput.Root` component to change the size of the
pin input component
```tsx
import { For, PinInput, Stack } from "@chakra-ui/react"
export const PinInputWithSizes = () => {
return (
{(size) => (
)}
)
}
```
### One time code
Pass the `otp` prop to the `PinInput.Root` component to make the pin input
component behave like a one-time code input. This helps improve the user
experience when entering OTP codes
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputWithOtp = () => {
return (
)
}
```
### Mask
Pass the `mask` prop to the `PinInput.Root` component to obscure the entered pin
code
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputWithMask = () => {
return (
)
}
```
### Placeholder
Pass the `placeholder` prop to the `PinInPut.Root` component to add a
placeholder to the pin input
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputWithPlaceholder = () => {
return (
)
}
```
### Field
Here's an example of how to compose the `Field` and the `PinInput` components
```tsx
import { Field, PinInput } from "@chakra-ui/react"
export const PinInputWithField = () => {
return (
Enter otp
)
}
```
### Hook Form
Here's an example of how to compose the `Field` and the `PinInput` components
with `react-hook-form`
```tsx
"use client"
import { Button, Field, PinInput, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
pin: z
.array(z.string().min(1), { required_error: "Pin is required" })
.length(4, { message: "Pin must be 4 digits long" }),
})
type FormValues = z.infer
export const PinInputWithHookForm = () => {
const { handleSubmit, control, formState } = useForm({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
)
}
```
### Controlled
Pass the `value` and `onValueChange` props to the `PinInPut.Root` component to
control the value of the pin input
```tsx
"use client"
import { PinInput } from "@chakra-ui/react"
import { useState } from "react"
export const PinInputControlled = () => {
const [value, setValue] = useState(["", "", "", ""])
return (
setValue(e.value)}>
)
}
```
### Store
An alternative way to control the pin input is to use the `RootProvider`
component and the `usePinInput` store hook.
This way you can access the pin input state and methods from outside the
component.
```tsx
"use client"
import {
Button,
ButtonGroup,
PinInput,
Stack,
usePinInput,
} from "@chakra-ui/react"
export const PinInputWithStore = () => {
const store = usePinInput()
return (
)
}
```
### Attached
Pass the `attached` prop to the `PinInput.Root` component to attach the pin
input to the input field
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputAttached = () => {
return (
)
}
```
### Alphanumeric
Pass the `type` prop to the `PinInput.Root` component to allow the user to enter
alphanumeric characters. Values can be either `alphanumeric`, `numeric`, or
`alphabetic`
```tsx
import { PinInput } from "@chakra-ui/react"
export const PinInputAlphanumeric = () => {
return (
)
}
```
### Closed Component
Here's how to setup the Pin input for a closed component composition.
#### Usage
```tsx
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| placeholder | "○" | `string` | The placeholder text for the input |
| type | "numeric" | `'numeric' \| 'alphabetic' \| 'alphanumeric'` | The type of value the pin-input should allow |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | The size of the component |
| variant | outline | `'outline' \| 'subtle' \| 'flushed'` | The variant of the component |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| autoFocus | undefined | `boolean` | Whether to auto-focus the first input. |
| blurOnComplete | undefined | `boolean` | Whether to blur the input when the value is complete |
| defaultValue | undefined | `string[]` | The initial value of the pin input when it is first rendered.
Use when you do not need to control the state of the pin input |
| disabled | undefined | `boolean` | Whether the inputs are disabled |
| form | undefined | `string` | The associate form of the underlying input element. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n root: string\n hiddenInput: string\n label: string\n control: string\n input(id: string): string\n}>` | The ids of the elements in the pin input. Useful for composition. |
| invalid | undefined | `boolean` | Whether the pin input is in the invalid state |
| mask | undefined | `boolean` | If `true`, the input's value will be masked just like `type=password` |
| name | undefined | `string` | The name of the input element. Useful for form submission. |
| onValueChange | undefined | `(details: ValueChangeDetails) => void` | Function called on input change |
| onValueComplete | undefined | `(details: ValueChangeDetails) => void` | Function called when all inputs have valid values |
| onValueInvalid | undefined | `(details: ValueInvalidDetails) => void` | Function called when an invalid value is entered |
| otp | undefined | `boolean` | If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`. |
| pattern | undefined | `string` | The regular expression that the user-entered input value is checked against. |
| readOnly | undefined | `boolean` | Whether the pin input is in the valid state |
| required | undefined | `boolean` | Whether the pin input is required |
| selectOnFocus | undefined | `boolean` | Whether to select input value when input is focused |
| translations | undefined | `IntlTranslations` | Specifies the localized strings that identifies the accessibility elements and their states |
| value | undefined | `string[]` | The value of the the pin input. |
| attached | undefined | `'true' \| 'false'` | The attached of the component |
# Popover
```tsx
import { Button, Input, Popover, Portal, Text } from "@chakra-ui/react"
export const PopoverBasic = () => {
return (
Naruto Form
Naruto is a Japanese manga series written and illustrated by
Masashi Kishimoto.
)
}
```
## Usage
```tsx
import { Popover } from "@chakra-ui/react"
```
```tsx
```
## Shortcuts
The `Popover` provides a shortcuts for common use cases.
### Arrow
The `Popover.Arrow` renders the `Popover.ArrowTip` component within in by
default.
This works:
```jsx
```
This might be more concise, if you don't need to customize the arrow tip.
```jsx
```
## Examples
### Controlled
Use the `open` and `onOpenChange` to control the visibility of the popover.
```tsx
"use client"
import { Button, Popover, Portal } from "@chakra-ui/react"
import { useState } from "react"
export const PopoverControlled = () => {
const [open, setOpen] = useState(false)
return (
setOpen(e.open)}>
This is a popover with the same width as the trigger button
)
}
```
### Sizes
Use the `size` prop to change the size of the popover component.
```tsx
import {
Button,
For,
Input,
Popover,
Portal,
Stack,
Text,
} from "@chakra-ui/react"
export const PopoverWithSizes = () => {
return (
{(size) => (
Naruto Form
Naruto is a Japanese manga series written and illustrated
by Masashi Kishimoto.
)}
)
}
```
### Lazy Mount
Use the `lazyMounted` and/or `unmountOnExit` prop to defer the mounting of the
popover content until it's opened.
```tsx
import { Button, Popover, Portal, Text } from "@chakra-ui/react"
export const PopoverLazyMounted = () => {
return (
Naruto Form
Naruto is a Japanese manga series written and illustrated by
Masashi Kishimoto.
)
}
```
### Placement
Use the `positioning.placement` prop to configure the underlying `floating-ui`
positioning logic.
```tsx
import { Button, Popover, Portal } from "@chakra-ui/react"
export const PopoverWithPlacement = () => {
return (
Some content
)
}
```
### Offset
Use the `positioning.offset` prop to adjust the position of the popover content.
```tsx
import { Button, Popover, Portal } from "@chakra-ui/react"
export const PopoverWithOffset = () => {
return (
This popover has a custom offset from its trigger
)
}
```
### Same Width
Use the `positioning.sameWidth` prop to make the popover content the same width
as the trigger.
```tsx
import { Button, Popover, Portal } from "@chakra-ui/react"
export const PopoverWithSameWidth = () => {
return (
This is a popover with the same width as the trigger button
)
}
```
### Nested Popover
When nesting overlay elements like popover, select, menu, inside of the popover,
set `portalled=false` on them.
Here's an example of a popover inside another popover.
```tsx
import { Button, Popover, Portal, Text } from "@chakra-ui/react"
export const PopoverNested = () => {
return (
Naruto is a Japanese manga series written and illustrated by
Masashi Kishimoto.
Some nested popover content
)
}
```
### Initial Focus
Use the `initialFocusEl` prop to set the initial focus of the popover content.
```tsx
"use client"
import { Box, Button, Group, Popover, Portal } from "@chakra-ui/react"
import { useRef } from "react"
export const PopoverWithInitialFocus = () => {
const ref = useRef(null)
return (
ref.current}>
Manage Your Channels
This is a popover with the same width as the trigger button
Step 2 of 4
)
}
```
### Form
Here's an example of a popover with a form inside.
```tsx
import {
Button,
Field,
Input,
Popover,
Portal,
Stack,
Textarea,
} from "@chakra-ui/react"
export const PopoverWithForm = () => {
return (
WidthHeightComments
)
}
```
### Custom Background
Use the `--popover-bg` CSS variable to change the background color of the
popover content and its arrow.
```tsx
import { Button, Input, Popover, Portal, Text } from "@chakra-ui/react"
export const PopoverWithCustomBg = () => {
return (
Naruto Form
Naruto is a Japanese manga series written and illustrated by
Masashi Kishimoto.
)
}
```
## Props
### Root
| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| autoFocus | true | `boolean` | Whether to automatically set focus on the first focusable
content within the popover when opened. |
| closeOnEscape | true | `boolean` | Whether to close the popover when the escape key is pressed. |
| closeOnInteractOutside | true | `boolean` | Whether to close the popover when the user clicks outside of the popover. |
| lazyMount | false | `boolean` | Whether to enable lazy mounting |
| modal | false | `boolean` | Whether the popover should be modal. When set to `true`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover |
| portalled | true | `boolean` | Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
of the popover content. |
| unmountOnExit | false | `boolean` | Whether to unmount on exit. |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| size | md | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| defaultOpen | undefined | `boolean` | The initial open state of the popover when it is first rendered.
Use when you do not need to control its open state. |
| id | undefined | `string` | The unique identifier of the machine. |
| ids | undefined | `Partial<{\n anchor: string\n trigger: string\n content: string\n title: string\n description: string\n closeTrigger: string\n positioner: string\n arrow: string\n}>` | The ids of the elements in the popover. Useful for composition. |
| immediate | undefined | `boolean` | Whether to synchronize the present change immediately or defer it to the next frame |
| initialFocusEl | undefined | `() => HTMLElement \| null` | The element to focus on when the popover is opened. |
| onEscapeKeyDown | undefined | `(event: KeyboardEvent) => void` | Function called when the escape key is pressed |
| onExitComplete | undefined | `() => void` | Function called when the animation ends in the closed state |
| onFocusOutside | undefined | `(event: FocusOutsideEvent) => void` | Function called when the focus is moved outside the component |
| onInteractOutside | undefined | `(event: InteractOutsideEvent) => void` | Function called when an interaction happens outside the component |
| onOpenChange | undefined | `(details: OpenChangeDetails) => void` | Function invoked when the popover opens or closes |
| onPointerDownOutside | undefined | `(event: PointerDownOutsideEvent) => void` | Function called when the pointer is pressed down outside the component |
| open | undefined | `boolean` | Whether the popover is open |
| persistentElements | undefined | `(() => Element \| null)[]` | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event |
| positioning | undefined | `PositioningOptions` | The user provided options used to position the popover content |
| present | undefined | `boolean` | Whether the node is present (controlled by the user) |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |
| unstyled | undefined | `boolean` | Whether to remove the component's style. |
# Portal
## Usage
The `Portal` uses the `ReactDOM.createPortal` API to render an element at the
end of `document.body` or specific container.
```jsx
import { Portal } from "@chakra-ui/react"
```
```jsx
) : (