## Content from https://www.heroui.com/docs/components/accordion Accordion | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library [🚀Ship faster with beautiful components](https://heroui.pro?utm_source=heroui.com&utm_medium=top-banner)[ HeroUI Pro ](https://heroui.pro?utm_source=heroui.com&utm_medium=top-banner) - [](/) [HeroUI v2.7.0 🔥](/blog/v2.7.0) - [](https://github.com/heroui-inc/heroui) - - open navigation menu - [Docs](/docs/guide/introduction) - [Components](/docs/components/accordion) - [Figma](/docs/guide/figma) - [Blog](/blog) - [Theme](/themes) - [ Roadmap ](https://nextuioss.featurebase.app/roadmap) - Search⌘K[23.6K](https://github.com/heroui-inc/heroui) open navigation menu Getting Started - [Introduction](/docs/guide/introduction) - [Design Principles](/docs/guide/design-principles) - [Installation](/docs/guide/installation) - [CLI](/docs/guide/cli) - [Routing](/docs/guide/routing) - [Forms Updated ](/docs/guide/forms) - [Tailwind v4 New ](/docs/guide/tailwind-v4) - [NextUI to HeroUI](/docs/guide/nextui-to-heroui) Frameworks - [Next.js](/docs/frameworks/nextjs) - [Vite](/docs/frameworks/vite) - [Remix](/docs/frameworks/remix) - [Astro](/docs/frameworks/astro) - [Laravel](/docs/frameworks/laravel) Customization - [Theme](/docs/customization/theme) - [Layout](/docs/customization/layout) - [Colors](/docs/customization/colors) - [Customize theme](/docs/customization/customize-theme) - [Create theme](/docs/customization/create-theme) - [Dark mode](/docs/customization/dark-mode) - [Override styles](/docs/customization/override-styles) - [Custom variants](/docs/customization/custom-variants) Components - [Accordion](/docs/components/accordion) - [Autocomplete](/docs/components/autocomplete) - [Alert](/docs/components/alert) - [Avatar](/docs/components/avatar) - [Badge](/docs/components/badge) - [Breadcrumbs](/docs/components/breadcrumbs) - [Button](/docs/components/button) - [Calendar](/docs/components/calendar) - [Card](/docs/components/card) - [Checkbox ](/docs/components/checkbox) - [Checkbox Group](/docs/components/checkbox-group) - [Chip](/docs/components/chip) - [Circular Progress](/docs/components/circular-progress) - [Code](/docs/components/code) - [Date Input](/docs/components/date-input) - [Date Picker](/docs/components/date-picker) - [Date Range Picker](/docs/components/date-range-picker) - [Divider](/docs/components/divider) - [Dropdown](/docs/components/dropdown) - [Drawer](/docs/components/drawer) - [Form](/docs/components/form) - [Image](/docs/components/image) - [Input ](/docs/components/input) - [Input OTP ](/docs/components/input-otp) - [Kbd ](/docs/components/kbd) - [Link](/docs/components/link) - [Listbox](/docs/components/listbox) - [Modal](/docs/components/modal) - [Navbar](/docs/components/navbar) - [Number Input ](/docs/components/number-input) - [Pagination](/docs/components/pagination) - [Popover](/docs/components/popover) - [Progress](/docs/components/progress) - [Radio Group ](/docs/components/radio-group) - [Range Calendar](/docs/components/range-calendar) - [Scroll Shadow](/docs/components/scroll-shadow) - [Select](/docs/components/select) - [Skeleton](/docs/components/skeleton) - [Slider](/docs/components/slider) - [Snippet](/docs/components/snippet) - [Spacer](/docs/components/spacer) - [Spinner ](/docs/components/spinner) - [Switch](/docs/components/switch) - [Table ](/docs/components/table) - [Tabs ](/docs/components/tabs) - [Toast ](/docs/components/toast) - [Textarea](/docs/components/textarea) - [Time Input](/docs/components/time-input) - [Tooltip](/docs/components/tooltip) - [User](/docs/components/user) API References - [HeroUI CLI ](/docs/api-references/cli-api) - [HeroUIProvider ](/docs/api-references/heroui-provider) # Accordion Accordion display a list of high-level options that can expand/collapse to reveal more information. [Storybook](https://storybook.heroui.com/?path=/story/components-accordion--default)[@heroui/accordion](https://www.npmjs.com/package/@heroui/accordion)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/accordion)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/accordion.ts) * * * [![Product Hunt](https://heroui-chat-assets.nyc3.cdn.digitaloceanspaces.com/herohack.png) Hackathon #HeroHack Join our hackathon, $6k in prizes + 3 months of HeroUI Chat Pro! ↗ ](https://hack.heroui.chat/twitter?utm_source=heroui.com&utm_medium=ad-banner) ## [Installation](#installation) CLI npm yarn pnpm bun > The above command is for individual installation only. You may skip this step if `@heroui/react` is already installed globally. ## [Import](#import) HeroUI exports 2 accordion-related components: - **Accordion**: The main component to display a list of accordion items. - **AccordionItem**: The item component to display a single accordion item. Individual Global ## [Usage](#usage) Preview Code Open in Chat ### [With Subtitle](#with-subtitle) ### [Expand multiple items](#expand-multiple-items) If you set `selectionMode` to `multiple`, then the `Accordion` will allow multiple items to be expanded at the same time. ### [Compact](#compact) If you set `isCompact` to `true`, the `Accordion` will be displayed in a compact style. ### [Variants](#variants) Accordion has 4 variants: `light`, `shadow`, `bordered` and `splitted`. #### [Light variant](#light-variant) #### [Shadow variant](#shadow-variant) #### [Bordered variant](#bordered-variant) #### [Splitted variant](#splitted-variant) ### [Default expanded keys](#default-expanded-keys) If you want to expand some items by default, you can set the `defaultExpandedKeys` property to an array of keys. ### [Disabled keys](#disabled-keys) If you want to disable some items, you can set the `disabledKeys` property to an array of keys. ### [Start content](#start-content) If you want to display some content before the accordion items, you can set the `startContent` property. ### [Custom Indicator](#custom-indicator) Accordion items have a property called `indicator`. You can use it to customize the open/close indicator. The indicator can be also a `function`, which receives the `isOpen`, `isDisabled` and the default `indicator` as parameters. ### [Custom Motion](#custom-motion) Accordion offers a `motionProps` property to customize the `enter` / `exit` animation. > Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants). ### [Controlled](#controlled) Accordion is a controlled component, which means you need to control the `selectedKeys` property by yourself. ## [Accordion Item Slots](#accordion-item-slots) - **base**: The accordion item wrapper. - **heading**: The accordion item heading. It contains the `indicator` and the `title`. - **trigger**: The button that open/close the accordion item. - **titleWrapper**: The wrapper of the `title` and `subtitle`. - **title**: The accordion item title. - **subtitle**: The accordion item subtitle. - **startContent**: The content before the accordion item. - **indicator**: The element that indicates the open/close state of the accordion item. - **content**: The accordion item content. ### [Custom Accordion Styles](#custom-accordion-styles) You can customize the accordion and accordion items styles by using any of the following properties: - `className`: The class name of the accordion. Modify the accordion wrapper styles.(Accordion) - `itemClasses`: The class names of the accordion items. Modify all accordion items styles at once. (Accordion) - `classNames`: The class names of the accordion items. Modify each accordion item styles separately. (AccordionItem) Here's an example of how to customize the accordion styles: ## [Data Attributes](#data-attributes) `AccordionItem` has the following attributes on the `base` element: - **data-open**: Whether the accordion item is open. - **data-disabled**: When the accordion item is disabled. - **data-hover**: When the accordion item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html). - **data-focus**: When the accordion item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-focus-visible**: When the accordion item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-disabled**: When the accordion item is disabled. Based on `isDisabled` prop. - **data-pressed**: When the accordion item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html). ## [Accessibility](#accessibility) - Keyboard event support for Space, Enter, Arrow Up, Arrow Down and Home / End keys. - Keyboard focus management and cross browser normalization. - `aria-expanded` attribute for the accordion item. - `aria-disabled` attribute for the accordion item. - `aria-controls` attribute for the accordion item. ## [API](#api) ### [Accordion Props](#accordion-props) Prop Type Default `children` ` ReactNode | ReactNode[] ` `variant` ` light | shadow | bordered | splitted ` `"light"` `selectionMode` ` none | single | multiple ` `selectionBehavior` ` toggle | replace ` `"toggle"` `isCompact` ` boolean ` `false` `isDisabled` `showDivider` `true` `dividerProps` ` DividerProps ` `hideIndicator` `disableAnimation` `disableIndicatorAnimation` `disallowEmptySelection` `keepContentMounted` `fullWidth` `motionProps` ` MotionProps ` `disabledKeys` ` React.Key[] ` `itemClasses` ` AccordionItemClassnames ` `selectedKeys` ` all | React.Key[] ` `defaultSelectedKeys` ### [Accordion Events](#accordion-events) `onSelectionChange` ` (keys: "all" | Set) => any ` ### [Accordion Item Props](#accordion-item-props) ` ReactNode ` `title` `subtitle` `indicator` ` IndicatorProps ` `startContent` `HeadingComponent` ` React.ElementType ` `"h2"` `classNames` ### [Accordion Item Events](#accordion-item-events) `onFocus` ` (e: FocusEvent) => void ` `onBlur` `onFocusChange` ` (isFocused: boolean) => void ` `onKeyDown` ` (e: KeyboardEvent) => void ` `onKeyUp` `onPress` ` (e: PressEvent) => void ` `onPressStart` `onPressEnd` `onPressChange` ` (isPressed: boolean) => void ` `onPressUp` `onClick` ` MouseEventHandler ` ### [Types](#types) #### [Accordion Item Indicator Props](#accordion-item-indicator-props) ### [Accordion Item classNames](#accordion-item-classnames) #### [Motion Props](#motion-props) Customization: Custom variantsAutocomplete [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/accordion.mdx) On this page - [Installation](#installation) - [Import](#import) - [Usage](#usage) - [With Subtitle](#with-subtitle) - [Expand multiple items](#expand-multiple-items) - [Compact](#compact) - [Variants](#variants) - [Light variant](#light-variant) - [Shadow variant](#shadow-variant) - [Bordered variant](#bordered-variant) - [Splitted variant](#splitted-variant) - [Default expanded keys](#default-expanded-keys) - [Disabled keys](#disabled-keys) - [Start content](#start-content) - [Custom Indicator](#custom-indicator) - [Custom Motion](#custom-motion) - [Controlled](#controlled) - [Accordion Item Slots](#accordion-item-slots) - [Custom Accordion Styles](#custom-accordion-styles) - [Data Attributes](#data-attributes) - [Accessibility](#accessibility) - [API](#api) - [Accordion Props](#accordion-props) - [Accordion Events](#accordion-events) - [Accordion Item Props](#accordion-item-props) - [Accordion Item Events](#accordion-item-events) - [Types](#types) - [Accordion Item Indicator Props](#accordion-item-indicator-props) - [Accordion Item classNames](#accordion-item-classnames) - [Motion Props](#motion-props) - * * * [Back to top](#accordion) Ship faster with beautiful components Discover 210+ stunning components by HeroUI Explore Components [](https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout) ![docs left background](https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png) ![docs right background](https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png) © 2025 NextUI Inc. All rights reserved. [](https://discord.gg/9b6yyZKmH4)[](https://x.com/hero_ui)[](https://github.com/heroui-inc/heroui) --- ## Content from https://www.heroui.com/docs/components/alert Alert | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Alert Alerts are temporary notifications that provide concise feedback about an action or event. [Storybook](https://storybook.heroui.com/?path=/story/components-alert--default)[@heroui/alert](https://www.npmjs.com/package/@heroui/alert)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/alert)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/alert.ts) ### [Colors](#colors) Alert comes with 6 color variants to convey different meanings. ### [Radius](#radius) ### [Custom Icon](#custom-icon) By default, Alert displays an appropriate icon based on the `color` prop. You can override this by providing a custom icon using the `icon` prop. ### [Without Icon](#without-icon) You can hide the icon by setting the `hideIcon` prop to `true`. ### [Without Icon Wrapper](#without-icon-wrapper) You can hide the icon wrapper by setting the `hideIconWrapper` prop to `true`. ### [With Action](#with-action) Alert supports an `endContent` prop for additional actions. ### [Controlled Visibility](#controlled-visibility) You can control the alert visibility using the `isVisible` and `onVisibleChange` props. ### [Custom Styles](#custom-styles) You can customize the alert by passing custom Tailwind CSS classes to the component slots. ### [Custom Implementation](#custom-implementation) You can use the `useAlert` hook to create your own alert component. Alert has the following attributes on the `base` element: - **data-visible**: When the alert is visible - **data-closeable**: When the alert can be closed - **data-has-title**: When the alert has a title - **data-has-description**: When the alert has a description ### [Slots](#slots) Alert has the following slots: - `base`: The main alert container element - `title`: The title element - `description`: The description element - `mainWrapper`: The wrapper for the title and description content - `closeButton`: The close button element - `iconWrapper`: The wrapper for the alert icon - `alertIcon`: The alert icon element - Alert has role of `alert` - Close button has aria-label="Close" by default - When closed, alert is removed from the DOM ### [Alert Props](#alert-props) `icon` `description` `color` ` default | primary | secondary | success | warning | danger ` `"default"` ` solid | bordered | flat | faded ` `"flat"` `radius` ` none | sm | md | lg | full ` `"md"` `endContent` `isVisible` `isClosable` `hideIcon` `hideIconWrapper` `closeButtonProps` ` ButtonProps ` ### [Alert Events](#alert-events) `onClose` ` () => void ` `onVisibleChange` ` (isVisible: boolean) => void ` AutocompleteAvatar [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/alert.mdx) - [Colors](#colors) - [Radius](#radius) - [Custom Icon](#custom-icon) - [Without Icon](#without-icon) - [Without Icon Wrapper](#without-icon-wrapper) - [With Action](#with-action) - [Controlled Visibility](#controlled-visibility) - [Custom Styles](#custom-styles) - [Custom Implementation](#custom-implementation) - [Slots](#slots) - [Alert Props](#alert-props) - [Alert Events](#alert-events) [Back to top](#alert) ## Content from https://www.heroui.com/docs/components/autocomplete Autocomplete | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Autocomplete An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query. [Storybook](https://storybook.heroui.com/?path=/story/components-autocomplete--default)[@heroui/autocomplete](https://www.npmjs.com/package/@heroui/autocomplete)[React Aria](https://react-spectrum.adobe.com/react-aria/useComboBox.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/autocomplete)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/autocomplete.ts) HeroUI exports 3 autocomplete-related components: - **Autocomplete**: The main component, which is a wrapper for the other components. - **AutocompleteSection**: The component that contains a group of autocomplete items. - **AutocompleteItem**: The component that represents a autocomplete item. ### [Dynamic items](#dynamic-items) Autocomplete follows the [Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html), accepting both static and dynamic collections. - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time. - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time. ### [Disabled](#disabled) ### [Disabled Items](#disabled-items) You can disable specific items by using the `disabledKeys` property. ### [Required](#required) If you pass the `isRequired` property to the autocomplete, it will have a `danger` asterisk at the end of the label and the autocomplete will be required. ### [Read Only](#read-only) If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display all available options, but users won't be able to select any of the listed options. ### [Sizes](#sizes) ### [Label Placements](#label-placements) You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`. > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default. ### [Start Content](#start-content) You can use the `startContent` and `endContent` properties to add content to the start and end of the autocomplete. ### [Item Start & End Content](#item-start--end-content) Since the `Autocomplete` component uses the [Listbox](/docs/components/listbox) component under the hood, you can use the `startContent` and `endContent` properties of the `AutocompleteItem` component to add content to the start and end of the autocomplete item. ### [Custom Value](#custom-value) By default, `Autocomplete` doesn't allow users to specify a value that doesn't exist in the list of options and will revert the input value to the current selected value on blur. By specifying `allowsCustomValue`, this behavior is suppressed and the user is free to enter any value within the field. ### [Custom Selector Icon](#custom-selector-icon) By default, `Autocomplete` uses a `chevron-down` icon as the selector icon which rotates when the autocomplete is open. You can customize this icon by passing a custom one to the `selectorIcon` property. > **Note**: Use the `disableSelectorIconRotation` property to disable the rotation of the icon. ### [Without Scroll Shadow](#without-scroll-shadow) Autocomplete component uses the [ScrollShadow](/docs/components/scroll-shadow) under the hood to show a shadow when the autocomplete content is scrollable. You can disable this shadow by passing using the `scrollShadowProps` property. > **Note**: You can also use the `showScrollIndicators` property to disable the scroll indicators. ### [With Description](#with-description) You can add a description to the autocomplete by passing the `description` property. ### [With Error Message](#with-error-message) You can combine the `isInvalid` and `errorMessage` properties to show an invalid autocomplete. ### [Events](#events) The `Autocomplete` component supports selection via mouse, keyboard, and touch. You can handle all of these via the `onSelectionChange` prop. `Autocomplete` will pass the selected key to the onSelectionChange handler. Additionally, ComboBox accepts an `onInputChange` prop which is triggered whenever the value is edited by the user, whether through typing or option selection. The example below uses `onSelectionChange` and `onInputChange` to update the selection and input value stored in React state. You can use the `selectedKey` and `onSelectionChange` properties to control the select value. ### [Fully Controlled](#fully-controlled) By passing in `inputValue`, `selectedKey`, and `items` to the `Autocomplete` you can control exactly what your `Autocomplete` should display. The following example shows how you would create a controlled `Autocomplete`, controlling everything from the selected value `selectedKey` to the combobox options `items`. We recommend using the `useFilter` hook from [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useFilter.html#usefilter) to manage the filtering of the items. > **Note**: It is important to note that you don't have to control every single aspect of a `Autocomplete`. If you decide to only control a single property of the `Autocomplete`, be sure to provide the change handler for that prop as well e.g. controlling `selectedKey` would require `onSelectionChange`. ### [Custom Items](#custom-items) You can customize the autocomplete items by modifying the `AutocompleteItem` children. ### [Custom Empty Content Message](#custom-empty-content-message) By default, a message `No results found.` will be shown if there is no result matching a query with your filter. You can customize the empty content message by modifying the `emptyContent` in `listboxProps`. ### [Custom Filtering](#custom-filtering) By default, `Autocomplete` uses a `"contains"` function from [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) to filter the list of options. This can be overridden using the `defaultFilter` prop, or by using the `items` prop to control the filtered list. When `items` is provided rather than `defaultItems`, `Autocomplete` does no filtering of its own. The following example uses the `defaultFilter` prop to filter the list of options using a custom filter function. ### [Asynchronous Filtering](#asynchronous-filtering) Autocomplete supports asynchronous filtering, in the example below we are using the [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server. ### [Asynchronous Loading](#asynchronous-loading) Autocomplete supports asynchronous loading, in the example below we are using a custom hook to fetch the [Pokemon API](https://pokeapi.co/api/v2/pokemon) data in combination with the `useInfiniteScroll` hook to load more data when the user reaches the end of the list. The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched. ### [Virtualization](#virtualization) Autocomplete supports virtualization, in the example below we are using the `isVirtualized` prop to enable virtualization. > **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport. #### [Ten Thousand Items](#ten-thousand-items) Virtualization with 10,000 items. #### [Max Listbox Height](#max-listbox-height) The `maxListboxHeight` prop is used to set the maximum height of the listbox. This is required when using virtualization. By default, it's set to `256`. #### [Custom Item Height](#custom-item-height) The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`. > **Note**: If the height of the list items differs from the default due to `startContent` or other custom content, be sure to pass the correct value to `itemHeight` to prevent layout issues. ### [With Sections](#with-sections) You can use the `AutocompleteSection` component to group autocomplete items. ### [Custom Sections Style](#custom-sections-style) You can customize the sections style by using the `classNames` property of the `AutocompleteSection` component. ### [Customizing the Autocomplete](#customizing-the-autocomplete) You can customize any slot of the autocomplete by using the `classNames` property. Autocomplete component also provides the [popoverProps](/docs/components/popover#api), [listboxProps](/docs/components/listbox#api), [inputProps](/docs/components/input#api) properties to customize the popover, listbox and input components. ## [Slots](#slots) - **base**: The main wrapper of the autocomplete. This wraps the input and popover components. - **listboxWrapper**: The wrapper of the listbox. This wraps the listbox component, this slot is used on top of the scroll shadow component. - **listbox**: The listbox component. This is the component that wraps the autocomplete items. - **popoverContent**: The popover content slot. Use this to modify the popover content styles. - **endContentWrapper**: The wrapper of the end content. This wraps the clear button and selector button. - **clearButton**: The clear button slot. - **selectorButton**: The selector button slot. `Autocomplete` has the following attributes on the `base` element: - **data-invalid**: When the autocomplete is invalid. Based on `isInvalid` prop. - **data-open**: Indicates if the autocomplete's popover is open. `Autocomplete` has the following attributes on the `selectorButton` element: `Autocomplete` has the following attributes on the `clearButton` element: - **data-visible**: Indicates if the autocomplete's clear button is visible. By default it is visible when hovering the autocomplete and when the autocomplete has a value (desktop), or when the autocomplete has a value (mobile). `AutocompleteItem` has the following attributes on the `base` element: - **data-disabled**: When the autocomplete item is disabled. Based on autocomplete `disabledKeys` prop. - **data-selected**: When the autocomplete item is selected. Based on autocomplete `selectedKey` prop. - **data-hover**: When the autocomplete item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - **data-pressed**: When the autocomplete item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - **data-focus**: When the autocomplete item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-focus-visible**: When the autocomplete item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Support for filtering a list of options by typing - Support for selecting a single option - Support for disabled options - Support for groups of items in sections - Support for custom user input values - Support for controlled and uncontrolled options, selection, input value, and open state - Support for custom filter functions - Async loading and infinite scrolling support - Support for virtualized scrolling for performance with long lists - Exposed to assistive technology as a combobox with ARIA - Labeling support for accessibility - Required and invalid states exposed to assistive technology via ARIA - Support for mouse, touch, and keyboard interactions - Keyboard support for opening the combo box list box using the arrow keys, including automatically focusing the first or last item accordingly - Support for opening the list box when typing, on focus, or manually - Handles virtual clicks on the input from touch screen readers to toggle the list box - Virtual focus management for combo box list box option navigation - Hides elements outside the input and list box from assistive technology while the list box is open in a portal - Custom localized announcements for option focusing, filtering, and selection using an ARIA live region to work around VoiceOver bugs - Support for description and error message help text linked to the input via ARIA ### [Autocomplete Props](#autocomplete-props) `children*` ` ReactNode[] ` `label` `name` ` string ` ` flat | bordered | faded | underlined ` `size` ` sm | md | lg ` `items` ` Iterable ` `defaultItems` `inputValue` `defaultInputValue` `allowsCustomValue` `allowsEmptyCollection` `shouldCloseOnBlur` `placeholder` `menuTrigger` ` focus | input | manual ` `"focus"` `labelPlacement` ` inside | outside | outside-left ` `"inside"` `selectedKey` ` React.Key ` `defaultSelectedKey` `errorMessage` ` ReactNode | ((v: ValidationResult) => ReactNode) ` `validate` ` (value: { inputValue: string, selectedKey: React.Key }) => ValidationError | true | null | undefined ` `validationBehavior` ` native | aria ` `"native"` `autoFocus` `defaultFilter` ` (textValue: string, inputValue: string) => boolean ` `filterOptions` ` Intl.CollatorOptions ` `"{ sensitivity: 'base'}"` `maxListboxHeight` ` number ` `"256"` `itemHeight` `"32"` `isVirtualized` `"undefined"` `isReadOnly` `isRequired` `isInvalid` `selectorIcon` `clearIcon` `showScrollIndicators` `scrollRef` ` React.RefObject ` `inputProps` ` InputProps ` `popoverProps` ` PopoverProps ` `listboxProps` ` ListboxProps ` `scrollShadowProps` ` ScrollShadowProps ` `selectorButtonProps` `clearButtonProps` `isClearable` `disableClearable` `disableSelectorIconRotation` ` Partial> ` ### [Autocomplete Events](#autocomplete-events) `onOpenChange` ` (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void ` `onInputChange` ` (value: string) => void ` ` (key: React.Key) => void ` ` (e: FocusEvent) => void ` ### [AutocompleteItem Props](#autocompleteitem-props) Check the [ListboxItem](/docs/components/listbox#listboxitem-props) props. ### [AutocompleteItem Events](#autocompleteitem-events) Check the [ListboxItem](/docs/components/listbox#listboxitem-events) events. ### [AutocompleteSection Props](#autocompletesection-props) Check the [ListboxSection](/docs/components/listbox#listboxsection-props) props. #### [Menu Trigger Action](#menu-trigger-action) AccordionAlert [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/autocomplete.mdx) - [Dynamic items](#dynamic-items) - [Disabled](#disabled) - [Disabled Items](#disabled-items) - [Required](#required) - [Read Only](#read-only) - [Sizes](#sizes) - [Label Placements](#label-placements) - [Start Content](#start-content) - [Item Start & End Content](#item-start--end-content) - [Custom Value](#custom-value) - [Custom Selector Icon](#custom-selector-icon) - [Without Scroll Shadow](#without-scroll-shadow) - [With Description](#with-description) - [With Error Message](#with-error-message) - [Events](#events) - [Fully Controlled](#fully-controlled) - [Custom Items](#custom-items) - [Custom Empty Content Message](#custom-empty-content-message) - [Custom Filtering](#custom-filtering) - [Asynchronous Filtering](#asynchronous-filtering) - [Asynchronous Loading](#asynchronous-loading) - [Virtualization](#virtualization) - [Ten Thousand Items](#ten-thousand-items) - [Max Listbox Height](#max-listbox-height) - [Custom Item Height](#custom-item-height) - [With Sections](#with-sections) - [Custom Sections Style](#custom-sections-style) - [Customizing the Autocomplete](#customizing-the-autocomplete) - [Autocomplete Props](#autocomplete-props) - [Autocomplete Events](#autocomplete-events) - [AutocompleteItem Props](#autocompleteitem-props) - [AutocompleteItem Events](#autocompleteitem-events) - [AutocompleteSection Props](#autocompletesection-props) - [Menu Trigger Action](#menu-trigger-action) [Back to top](#autocomplete) ## Content from https://www.heroui.com/docs/components/avatar Avatar | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Avatar The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon. [Storybook](https://storybook.heroui.com/?path=/story/components-avatar--default)[@heroui/avatar](https://www.npmjs.com/package/@heroui/avatar)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/avatar)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/avatar.ts) HeroUI exports 3 avatar-related components: - **Avatar**: The main component to display an avatar. - **AvatarGroup**: A wrapper component to display a group of avatars. - **AvatarIcon**: The default icon used as fallback when the image fails to load. ### [Bordered](#bordered) ### [Avatar Fallbacks](#avatar-fallbacks) If there is an error loading the `src` of the avatar, there are 2 fallbacks: - If there's a `name` prop, we use it to generate the initials and a random, accessible background color. - If there's no `name` prop, we use a default avatar. If the `showFallback` is not passed, the fallbacks will not be displayed. ### [Custom Fallback](#custom-fallback) You can also provide a custom fallback component to be displayed when the `src` fails to load. In case you need to customize the avatar even further, you can use the `useAvatar` hook to create your own implementation. ### [Custom initials logic](#custom-initials-logic) It is possible to customize the logic used to generate the initials by passing a function to the `getInitials` prop. By default we merge the first characters of each word in the `name` prop. ## [Avatar Group](#avatar-group) ### [Group Disabled](#group-disabled) ### [Group Max Count](#group-max-count) You can limit the number of avatars displayed by passing the `max` prop to the `AvatarGroup` component. ### [Group Total Count](#group-total-count) You can display the total number of avatars by passing the `total` prop to the `AvatarGroup` component. ### [Group Custom count](#group-custom-count) `AvatarGroup` provides a `renderCount` prop to customize the count displayed when the `total` prop is passed. ### [Group Grid](#group-grid) By passing the `isGrid` prop to the `AvatarGroup` component, the avatars will be displayed in a grid layout. ### [Group Custom Implementation](#group-custom-implementation) In case you need to customize the avatar group even further, you can use the `useAvatarGroup` hook and the `AvatarGroupProvider` to create your own implementation. - **base**: Avatar wrapper, it includes styles for focus ring, position, and general appearance. - **img**: Image element within the avatar, it includes styles for opacity transition and size. - **fallback**: Fallback content when the image fails to load or is not provided, it includes styles for centering the content. - **name**: Initials displayed when the image is not provided or fails to load, it includes styles for font, text alignment, and inheritance. - **icon**: Icon element within the avatar, it includes styles for centering the content, text inheritance, and size. ### [Custom Avatar Styles](#custom-avatar-styles) You can customize any part of the avatar by using the `classNames` prop, each `slot` has its own `className`. `Avatar` has the following attributes on the `base` element: - **data-hover**: When the avatar is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - **data-focus**: When the avatar is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`. - **data-focus-visible**: When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`. ### [Avatar Props](#avatar-props) `src` `"full"` `fallback` `isBordered` `isFocusable` `showFallback` `ImgComponent` `"img"` `imgProps` ` ImgComponentProps ` ` Partial> ` ### [Avatar Group Props](#avatar-group-props) `max` `"5"` `total` ` AvatarProps['size'] ` ` AvatarProps['color'] ` ` AvatarProps['radius'] ` `isGrid` `renderCount` ` (count: number) => ReactNode ` ` Partial> ` AlertBadge [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/avatar.mdx) - [Bordered](#bordered) - [Avatar Fallbacks](#avatar-fallbacks) - [Custom Fallback](#custom-fallback) - [Custom initials logic](#custom-initials-logic) - [Avatar Group](#avatar-group) - [Group Disabled](#group-disabled) - [Group Max Count](#group-max-count) - [Group Total Count](#group-total-count) - [Group Custom count](#group-custom-count) - [Group Grid](#group-grid) - [Group Custom Implementation](#group-custom-implementation) - [Custom Avatar Styles](#custom-avatar-styles) - [Avatar Props](#avatar-props) - [Avatar Group Props](#avatar-group-props) [Back to top](#avatar) ## Content from https://www.heroui.com/docs/components/badge Badge | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Badge Badges are used as a small numerical value or status descriptor for UI elements. [Storybook](https://storybook.heroui.com/?path=/story/components-badge--default)[@heroui/badge](https://www.npmjs.com/package/@heroui/badge)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/badge)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/badge.ts) ### [Placements](#placements) ### [Shapes](#shapes) For a better positioning, you can use the `shape` property to define the shape of the badge. ### [Badge Visibility](#badge-visibility) You can control the visibility of the badge by using the `isInvisible` property. ### [Content Examples](#content-examples) ### [Disable Outline](#disable-outline) By default, the badge has an outline, you can disable it by using the `showOutline={false}` property. ### [Accessibility](#accessibility) It's not advisable to depend on the badge's content for accurate announcement. Instead, consider supplying a comprehensive description, such as using `aria-label`. The Badge component has two slots: - **base**: The base slot for the badge, which is the container of the badge. - **badge**: The main slot for the badge content, which is the content of the badge. ### [Badge Props](#badge-props) `content` ` string | number | ReactNode ` ` solid | flat | faded | shadow ` `"solid"` `shape` ` circle | rectangle ` `"rectangle"` `placement` ` top-right | top-left | bottom-right | bottom-left ` `"top-right"` `showOutline` `disableOutline` `isInvisible` `isOneChar` `isDot` ` Partial> ` AvatarBreadcrumbs [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/badge.mdx) - [Placements](#placements) - [Shapes](#shapes) - [Badge Visibility](#badge-visibility) - [Content Examples](#content-examples) - [Disable Outline](#disable-outline) - [Badge Props](#badge-props) [Back to top](#badge) ## Content from https://www.heroui.com/docs/components/breadcrumbs Breadcrumbs | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Breadcrumbs Breadcrumbs display a hierarchy of links to the current page or resource in an application. [Storybook](https://storybook.heroui.com/?path=/story/components-breadcrumbs--default)[@heroui/breadcrumbs](https://www.npmjs.com/package/@heroui/breadcrumbs)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/breadcrumbs)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/breadcrumbs.ts) HeroUI exports 2 breadcrumb-related components: - **Breadcumbs**: The main component, which is a wrapper for the other components. - **BreadcrumbItem**: The component that represents a breadcrumb item. Disabled breadcrumbs display items but prevent navigation, ensuring a consistent layout. The last item, signifying the current page, isn't disabled. ### [Underlines](#underlines) ### [Routing](#routing) The `` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). See the [Routing](/docs/guide/routing) guide to learn how to set this up. You can control the current/active item by using the `isCurrent` and `onAction` props. > **Note**: If needed you can use the `onPress` prop to handle the click event on the breadcrumb item. ### [Menu Type](#menu-type) It is possible to use the `Breadcrumbs` component as a horizontal menu. This is useful when you want to display a list of possible navigations and let the user choose one of them. ### [Start & End Content](#start--end-content) You can add any element to the start or end of the breadcrumbs by using the `startContent` and `endContent` props. The above example uses the `startContent` prop to add icons to the start of the breadcrumbs. ### [Custom Separator](#custom-separator) You can customize the separator between breadcrumbs by using the `separator` prop. the `BreadcrumbItem` component accepts any element as its children. This allows you to customize the appearance of the breadcrumb items. The above example uses the [Dropdown](/docs/components/dropdown) component to create a dropdown menu in the breadcrumb. The `Breadcrumbs` component picks only the `BreadcrumbItem` components as its children. This means that you cannot place any other component directly inside the `Breadcrumbs` component. ### [Collapsing Items](#collapsing-items) The `Breadcrumb` component provides 3 props to control the collapsing of items: - `maxItems`: Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. - `itemsBeforeCollapse`: If max items is exceeded, the number of items to show before the ellipsis. - `itemsAfterCollapse`: If max items is exceeded, the number of items to show after the ellipsis. > **Note**: The ellipsis item will use the first collapsed item as its `href` prop. ### [Customizing the Ellipsis Item](#customizing-the-ellipsis-item) You can customize the ellipsis item by using the `renderEllipsis` prop. This prop accepts a function that returns a React element. - Breadcrumbs Slots - **base**: The main slot for the breadcrumbs. It wraps the `list` slot. - **list**: The list of breadcrumbs wrapper. - **ellipsis**: The slot for the ellipsis item. This is only visible when the breadcrumbs are collapsed. - **separator**: The slot for the custom separator, the one that can be set using the `separator` prop. - BreadcrumbItem Slots - **base**: The main slot for the breadcrumb item. It wraps the `item` slot. - **item**: The breadcrumb item wrapper. - **separator**: The slot for the item separator. ### [Customizing the Breadcrumbs Styles](#customizing-the-breadcrumbs-styles) You can customize the `Breadcrumbs` style by using the `classNames` prop and its items by using the `itemClasses` prop. `BreadcrumbItem` has the following attributes on the `item` element: - **data-current**: When the breadcrumb item is the current item. Based on breadcrumb `isCurrent` prop or on whether the item is the last one. - **data-disabled**: When the breadcrumb item is disabled. Based on breadcrumb `isDisabled` prop. - **data-focus**: When the breadcrumb item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-focus-visible**: When the breadcrumb item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Implemented as an ordered list of items. - Support for mouse, touch, and keyboard interactions on breadcrumbs. - Support for navigation links via `` elements or custom element types via ARIA. - Localized ARIA labeling support for landmark navigation region. - Support for disabled breadcrumbs. - The last item is automatically marked as the current page using `aria-current`. ### [Breadcrumbs Props](#breadcrumbs-props) ` solid | bordered | light ` ` foreground | primary | secondary | success | warning | danger ` `"foreground"` `underline` ` none | active | hover | focus | always ` `"none"` `separator` `maxItems` `itemsBeforeCollapse` `itemsAfterCollapse` `hideSeparator` ` Partial> ` ` Partial> ` ### [Breadcrumbs Events](#breadcrumbs-events) `onAction` ### [BreadcrumbItem Props](#breadcrumbitem-props) `isCurrent` `isLast` ### [BreadcrumbItem Events](#breadcrumbitem-events) #### [Render Ellipsis Function](#render-ellipsis-function) BadgeButton [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/breadcrumbs.mdx) - [Underlines](#underlines) - [Routing](#routing) - [Menu Type](#menu-type) - [Start & End Content](#start--end-content) - [Custom Separator](#custom-separator) - [Collapsing Items](#collapsing-items) - [Customizing the Ellipsis Item](#customizing-the-ellipsis-item) - [Customizing the Breadcrumbs Styles](#customizing-the-breadcrumbs-styles) - [Breadcrumbs Props](#breadcrumbs-props) - [Breadcrumbs Events](#breadcrumbs-events) - [BreadcrumbItem Props](#breadcrumbitem-props) - [BreadcrumbItem Events](#breadcrumbitem-events) - [Render Ellipsis Function](#render-ellipsis-function) [Back to top](#breadcrumbs) ## Content from https://www.heroui.com/docs/components/button Button | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Button Buttons allow users to perform actions and choose with a single tap. [Storybook](https://storybook.heroui.com/?path=/story/components-button--default)[@heroui/button](https://www.npmjs.com/package/@heroui/button)[React Aria](https://react-spectrum.adobe.com/react-aria/useButton.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/button)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/button.ts) HeroUI exports 2 button-related components: - **Button**: The main component to display a button. - **ButtonGroup**: A wrapper component to display a group of buttons. ### [Loading](#loading) Pass the `isLoading` prop to display a [Spinner](/docs/components/spinner) component inside the button. You can also customize the loading spinner by passing the a custom component to the `spinner` prop. ### [With Icons](#with-icons) You can add icons to the `Button` by passing the `startContent` or `endContent` props. ### [Icon Only](#icon-only) You can also display a button without text by passing the `isIconOnly` prop and the desired icon as `children`. You can customize the `Button` component by passing custom Tailwind CSS classes to the component slots. > Custom class names will override the default ones thanks to [Tailwind Merge](https://github.com/dcastil/tailwind-merge) library. It means that you don't need to worry about class conflicts. You can also use the `useButton` hook to create your own button component. ## [Button Group](#button-group) The `ButtonGroup` component also accepts the `isDisabled` prop to disable all buttons inside it. ### [Group Use case](#group-use-case) A common use case for the `ButtonGroup` component is to display a group of two buttons one for the selected value and another for the `dropdown`. > See the [Dropdown](/docs/components/dropdown) component for more details. `Button` has the following attributes on the `base` element: - **data-hover**: When the button is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - **data-focus**: When the button is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-focus-visible**: When the button is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-disabled**: When the button is disabled. Based on `isDisabled` prop. - **data-pressed**: When the button is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - **data-loading**: When the button is loading. Based on `isLoading` prop. - Button has role of `button`. - Keyboard event support for Space and Enter keys. - Mouse and touch event handling, and press state management. We recommend to read this [blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) about the complexities of building buttons that work well across devices and interaction methods. ### [Button Props](#button-props) ` solid | bordered | light | flat | faded | shadow | ghost ` `spinner` `spinnerPlacement` ` start | end ` `"start"` `isIconOnly` `isLoading` `disableRipple` ### [Button Events](#button-events) ### [Button Group Props](#button-group-props) `"xl"` BreadcrumbsCalendar [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/button.mdx) - [Loading](#loading) - [With Icons](#with-icons) - [Icon Only](#icon-only) - [Button Group](#button-group) - [Group Use case](#group-use-case) - [Button Props](#button-props) - [Button Events](#button-events) - [Button Group Props](#button-group-props) [Back to top](#button) ## Content from https://www.heroui.com/docs/components/calendar Calendar | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Calendar A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date. [Storybook](https://storybook.heroui.com/?path=/story/components-calendar--default)[@heroui/calendar](https://www.npmjs.com/package/@heroui/calendar)[React Aria](https://react-spectrum.adobe.com/react-aria/useCalendar.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/calendar)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/calendar.ts) A Calendar has no selection by default. An initial, uncontrolled value can be provided to the Calendar using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop. Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. The `isDisabled` boolean prop makes the Calendar disabled. Cells cannot be focused or selected. The `isReadOnly` boolean prop makes the Calendar's value immutable. Unlike `isDisabled`, the Calendar remains focusable. A Calendar has no selection by default. An initial, uncontrolled value can be provided to the Calendar using the `defaultValue` prop. Alternatively, a controlled value can be provided using the value prop. ### [Min Date Value](#min-date-value) By default, Calendar allows selecting any date. The `minValue` can also be used to prevent the user from selecting dates outside a certain range. This example only accepts dates after today. ### [Max Date Value](#max-date-value) By default, Calendar allows selecting any date. The `maxValue` can also be used to prevent the user from selecting dates outside a certain range. This example only accepts dates before today. ### [Unavailable Dates](#unavailable-dates) Calendar supports marking certain dates as unavailable. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable. ### [Controlled Focused Value](#controlled-focused-value) Calendar tries to avoid allowing the user to select invalid dates in the first place. However, if according to application logic a selected date is invalid, the isInvalid prop can be set. This alerts assistive technology users that the selection is invalid, and can be used for styling purposes as well. In addition, the errorMessage slot may be used to help the user fix the issue. By default, the selected date is focused when a Calendar first mounts. If no `value` or `defaultValue` prop is provided, then the current date is focused. However, Calendar supports controlling which date is focused using the `focusedValue` and `onFocusChange` props. This also determines which month is visible. The `defaultFocusedValue` prop allows setting the initial focused date when the Calendar first mounts, without controlling it. ### [Invalid Date](#invalid-date) This example validates that the selected date is a weekday and not a weekend according to the current locale. ### [With Month And Year Picker](#with-month-and-year-picker) Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled. ### [International Calendars](#international-calendars) Calendar supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the `Provider` component. ### [Visible Months](#visible-months) By default, the Calendar displays a single month. The `visibleMonths` prop allows displaying up to 3 months at a time. ### [Custom first day of week](#custom-first-day-of-week) By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. ### [Page Behaviour](#page-behaviour) By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`. ### [Presets](#presets) Here's the example to customize `topContent` and `bottomContent` to have some preset values. - **base**: Calendar wrapper, it handles alignment, placement, and general appearance. - **prevButton**: The previous button of the calendar. - **nextButton**: The next button of the calendar. - **headerWrapper**: Wraps the picker (month / year). - **header**: The header element. - **title**: A description of the visible date range, for use in the calendar title. - **gridWrapper**: The wrapper for the calendar grid. - **grid**: The date grid element (e.g. ``). - **gridHeader**: The date grid header element (e.g. ``). - **gridHeaderCell**: The date grid header cell element (e.g. ``). - **gridBodyRow**: The date grid body row element (e.g. ``). - **cell**: The date grid cell element (e.g. `

`). - gridHeaderRow: The date grid header row element (e.g. `
`). - gridBody: The date grid body element (e.g. `
`). - cellButton: The button element within the cell. - pickerWrapper: The wrapper for the picker - pickerMonthList: The month list picker. - pickerYearList: The year list picker. - pickerHighlight: The highlighted item of the picker. - pickerItem: The item of the picker. - helperWrapper: The helper message of the calendar. - errorMessage: The error message of the calendar. `Calendar` has the following attributes on the `CalendarCell` element: - data-focused: Whether the cell is focused. - data-hovered: Whether the cell is currently hovered with a mouse. - data-pressed: Whether the cell is currently being pressed. - data-unavailable: Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they are unavailable, such as a different color or a strikethrough. - data-disabled: Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props. - data-focus-visible: Whether the cell is keyboard focused. - data-outside-visible-range: Whether the cell is outside the visible range of the calendar. - data-outside-month: Whether the cell is outside the current month. - data-selected: Whether the cell is selected. - data-selected-start: Whether the cell is the first date in a range selection. - data-selected-end: Whether the cell is the last date in a range selection. - data-invalid: Whether the cell is part of an invalid selection. - Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well. - Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well. - Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change. ### [Calendar Props](#calendar-props) `value` ` DateValue \| null ` `defaultValue` `minValue` ` DateValue ` `maxValue` `visibleMonths` `"1"` `firstDayOfWeek` ` sun \| mon \| tue \| wed \| thu \| fri \| sat ` `focusedValue` `defaultFocusedValue` `calendarWidth` ` number \| string ` `pageBehavior` ` single \| visible ` `"visible"` `weekdayStyle` ` narrow \| short \| long \| undefined ` `"narrow"` `showMonthAndYearPickers` `showHelper` `showShadow` `isHeaderExpanded` `isHeaderDefaultExpanded` `topContent` `bottomContent` `isDateUnavailable` ` (date: DateValue) => boolean ` `createCalendar` ` (calendar: SupportedCalendars) => Calendar \| null ` `"all calendars"` ` ReactNode \| (v: ValidationResult) => ReactNode ` `hideDisabledDates` ` Partial> ` ### [Calendar Events](#calendar-events) `onChange` ` (value: MappedDateValue) => void ` ` (date: CalendarDate) => void ` `onHeaderExpandedChange` ` (isExpanded: boolean) => void ` #### [Supported Calendars](#supported-calendars) ButtonCard [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/calendar.mdx) - [Min Date Value](#min-date-value) - [Max Date Value](#max-date-value) - [Unavailable Dates](#unavailable-dates) - [Controlled Focused Value](#controlled-focused-value) - [Invalid Date](#invalid-date) - [With Month And Year Picker](#with-month-and-year-picker) - [International Calendars](#international-calendars) - [Visible Months](#visible-months) - [Custom first day of week](#custom-first-day-of-week) - [Page Behaviour](#page-behaviour) - [Presets](#presets) - [Calendar Props](#calendar-props) - [Calendar Events](#calendar-events) - [Supported Calendars](#supported-calendars) [Back to top](#calendar) ## Content from https://www.heroui.com/docs/components/card Card \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Card Card is a container for text, photos, and actions in the context of a single subject. [Storybook](https://storybook.heroui.com/?path=/story/components-card--default)[@heroui/card](https://www.npmjs.com/package/@heroui/card)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/card)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/card.ts) HeroUI exports 4 card-related components: - Card: The main component to display a card. - CardHeader: Commonly used for the title of a card. - CardBody: The content of the card. - CardFooter: Commonly used for actions. ### [With Divider](#with-divider) > See the [Divider](/docs/components/divider) component for more details. ### [With Image](#with-image) ### [Blurred Footer](#blurred-footer) You can pass the `isFooterBlurred` prop to the card to blur the footer. ### [Composition](#composition) You can use other HeroUI components inside the card to compose a more complex card. ### [Blurred Card](#blurred-card) You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element. > Note: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible. ### [Primary Action](#primary-action) If you pass the `isPressable` prop to the card, it will be rendered as a button. > Note: that the used callback function is `onPress` instead of `onClick`. Please see the [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html#usepress) component for more details. ### [Cover Image](#cover-image) You can use `Image` component as the cover of the card by taking it out of the `CardBody` component. - base: The main container of the card, where the header, body, and footer are placed. - header: The header of the card, usually used for the title. - body: The body of the card, where the main content is placed. - footer: The footer of the card, usually used for actions. `Card` has the following attributes on the `base` element: - data-hover: When the card is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-focus: When the card is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the card is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-disabled: When the card is disabled. Based on `isDisabled` prop. - data-pressed: When the card is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) ### [Card Props](#card-props) `shadow` ` none \| sm \| md \| lg ` `"lg"` `isHoverable` `isPressable` `isBlurred` `isFooterBlurred` `allowTextSelectionOnPress` ` Partial> ` ### [Card Events](#card-events) CalendarCheckbox [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/card.mdx) - [With Divider](#with-divider) - [With Image](#with-image) - [Blurred Footer](#blurred-footer) - [Composition](#composition) - [Blurred Card](#blurred-card) - [Primary Action](#primary-action) - [Cover Image](#cover-image) - [Card Props](#card-props) - [Card Events](#card-events) [Back to top](#card) ## Content from https://www.heroui.com/docs/components/checkbox Checkbox \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Checkbox Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. [Storybook](https://storybook.heroui.com/?path=/story/components-checkbox--default)[@heroui/checkbox](https://www.npmjs.com/package/@heroui/checkbox)[React Aria](https://react-spectrum.adobe.com/react-aria/useCheckbox.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/checkbox)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/checkbox.ts) ### [Indeterminate](#indeterminate) The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overriding its appearance and maintaining it until set to `false`, regardless of user interaction. ### [Line Through](#line-through) ### [Custom Check Icon](#custom-check-icon) > By default, `IconProps` will be passed to your icon component. Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element. > Note: HeroUI `Checkbox` also supports native events like `onChange`, useful for form libraries such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/). - base: Checkbox wrapper, it handles alignment, placement, and general appearance. - wrapper: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states. - hiddenInput: The hidden input element that is used to handle the checkbox state. - icon: Icon within the checkbox, controlling size, visibility, and changes when checked. - label: The text associated with the checkbox. You can customize the `Checkbox` component by passing custom Tailwind CSS classes to the component slots. In case you need to customize the checkbox even further, you can use the `useCheckbox` hook to create your own implementation. > Note: We used [Tailwind Variants](https://www.tailwind-variants.org/) to implement the styles above, you can use any other library such as [clsx](https://www.npmjs.com/package/clsx) to achieve the same result. `Checkbox` has the following attributes on the `base` element: - data-selected: When the checkbox is checked. Based on `isSelected` prop. - data-pressed: When the checkbox is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-invalid: When the checkbox is invalid. Based on `validationState` prop. - data-readonly: When the checkbox is readonly. Based on `isReadOnly` prop. - data-indeterminate: When the checkbox is indeterminate. Based on `isIndeterminate` prop. - data-hover: When the checkbox is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-focus: When the checkbox is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the checkbox is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-disabled: When the checkbox is disabled. Based on `isDisabled` prop. - data-loading: When the checkbox is loading. Based on `isLoading` prop. - Built with a native HTML `` element. - Full support for browser features like form autofill. - Keyboard event support for Tab and Space keys. - Labeling support for assistive technology. - Indeterminate state support. ### [Checkbox Props](#checkbox-props) ` CheckboxIconProps ` `"primary"` `lineThrough` `isSelected` `defaultSelected` `isIndeterminate` `validationState` ` valid \| invalid ` ` Partial> ` ### [Checkbox Events](#checkbox-events) ` React.ChangeEvent ` `onValueChange` ` (isSelected: boolean) => void ` #### [Checkbox Icon Props](#checkbox-icon-props) CardCheckbox Group [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/checkbox.mdx) - [Indeterminate](#indeterminate) - [Line Through](#line-through) - [Custom Check Icon](#custom-check-icon) - [Checkbox Props](#checkbox-props) - [Checkbox Events](#checkbox-events) - [Checkbox Icon Props](#checkbox-icon-props) [Back to top](#checkbox) ## Content from https://www.heroui.com/docs/components/checkbox-group Checkbox Group \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Checkbox Group A CheckboxGroup allows users to select one or more items from a list of choices. [Storybook](https://storybook.heroui.com/?path=/story/components-checkboxgroup--default)[@heroui/checkbox](https://www.npmjs.com/package/@heroui/checkbox)[React Aria](https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/checkbox)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/checkbox.ts) HeroUI exports 2 checkbox-related components: - CheckboxGroup: The root component, it wraps the label and the wrapper. - Checkbox: The checkbox component. ### [Horizontal](#horizontal) You can use the `value` and `onValueChange` properties to control the checkbox input value. ### [Invalid](#invalid) - base: Checkbox group root wrapper, it wraps the label and the wrapper. - wrapper: Checkbox group wrapper, it wraps all checkboxes. - label: Checkbox group label, it is placed before the wrapper. - description: The description of the checkbox group. - errorMessage: The error message of the checkbox group. You can customize the `CheckboxGroup` component by passing custom Tailwind CSS classes to the component slots. In case you need to customize the checkbox even further, you can use the `useCheckboxGroup` hook to create your own implementation. ### [Checkbox Group Props](#checkbox-group-props) ` ReactNode[] \| ReactNode[] ` `orientation` ` vertical \| horizontal ` `"vertical"` ` xs \| sm \| md \| lg \| xl ` ` none \| base \| xs \| sm \| md \| lg \| xl \| full ` ` string[] ` ` (value: string[]) => ValidationError \| true \| null \| undefined ` ` Partial> ` ### [Checkbox Group Events](#checkbox-group-events) ` (value: string[]) => void ` CheckboxChip [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/checkbox-group.mdx) - [Horizontal](#horizontal) - [Invalid](#invalid) - [Checkbox Group Props](#checkbox-group-props) - [Checkbox Group Events](#checkbox-group-events) [Back to top](#checkbox-group) ## Content from https://www.heroui.com/docs/components/chip Chip \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Chip A Chip is a small block of essential information that represent an input, attribute, or action. [Storybook](https://storybook.heroui.com/?path=/story/components-chip--default)[@heroui/chip](https://www.npmjs.com/package/@heroui/chip)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/chip)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/chip.ts) ### [With Close Button](#with-close-button) If you pass the `onClose` prop, the close button will be visible. You can override the close icon by passing the `endContent` prop. ### [With Avatar](#with-avatar) ### [List of Chips](#list-of-chips) - base: The base slot of the chip, it is the container of the chip. - content: The content slot of the chip, it is the container of the chip children. - dot: Small dot on the left side of the chip. It is visible when the `variant=dot` prop is passed. - avatar: Avatar classes of the chip. It is visible when the `avatar` prop is passed. - closeButton: Close button classes of the chip. It is visible when the `onClose` prop is passed. You can customize the `Chip` component by passing custom Tailwind CSS classes to the component slots. ### [Chip Props](#chip-props) ` solid \| bordered \| light \| flat \| faded \| shadow \| dot ` `avatar` ` Partial> ` ### [Chip Events](#chip-events) Checkbox GroupCircular Progress [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/chip.mdx) - [With Close Button](#with-close-button) - [With Avatar](#with-avatar) - [List of Chips](#list-of-chips) - [Chip Props](#chip-props) - [Chip Events](#chip-events) [Back to top](#chip) ## Content from https://www.heroui.com/docs/components/circular-progress Circular Progress \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Circular Progress Circular progress indicators are utilized to indicate an undetermined wait period or visually represent the duration of a process. [Storybook](https://storybook.heroui.com/?path=/story/components-circularprogress--default)[@heroui/progress](https://www.npmjs.com/package/@heroui/progress)[React Aria](https://react-spectrum.adobe.com/react-aria/useProgressBar.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/progress)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/circular-progress.ts) > Note: Make sure to pass the `aria-label` prop when the `label` prop is not provided. This is required for accessibility. ### [With Label](#with-label) ### [With Value](#with-value) ### [Value Formatting](#value-formatting) Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format. `formatOptions` is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) and is applied based on the current locale. - base: The base slot of the circular progress, it is the main container. - svgWrapper: The wrapper of the svg circles and the value label. - svg: The svg element of the circles. - track: The track is the background circle of the circular progress. - indicator: The indicator is the one that is filled according to the `value`. - value: The value content. - label: The label content. You can customize the `CircularProgress` component by passing custom Tailwind CSS classes to the component slots. `CircularProgress` has the following attributes on the `base` element: - data-indeterminate: Indicates whether the progress is indeterminate. - data-disabled: Indicates whether the progress is disabled. Based on `isDisabled` prop. - Exposed to assistive technology as a progress bar via ARIA. - Labeling support for accessibility. - Internationalized number formatting as a percentage or value. - Determinate and indeterminate progress support. - Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes. ### [Circular Progress Props](#circular-progress-props) `valueLabel` `"0"` `"100"` `formatOptions` ` Intl.NumberFormat ` `"{style: 'percent'}"` `showValueLabel` `strokeWidth` `"2"` ` Partial> ` ChipCode [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/circular-progress.mdx) - [With Label](#with-label) - [With Value](#with-value) - [Value Formatting](#value-formatting) - [Circular Progress Props](#circular-progress-props) [Back to top](#circular-progress) ## Content from https://www.heroui.com/docs/components/code Code \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Code Code is a component used to display inline code. [Storybook](https://storybook.heroui.com/?path=/story/components-code--default)[@heroui/code](https://www.npmjs.com/package/@heroui/code)[Server component](https://nextjs.org/docs/app/building-your-application/rendering/server-components)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/code)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/code.ts) ### [Code Props](#code-props) `"sm"` Circular ProgressDate Input [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/code.mdx) - [Code Props](#code-props) [Back to top](#code) ## Content from https://www.heroui.com/docs/components/date-input DateInput \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # DateInput DateInput is a component that allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment. [Storybook](https://storybook.heroui.com/?path=/story/components-dateinput--default)[@heroui/date-input](https://www.npmjs.com/package/@heroui/date-input)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/date-input)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/date-input.ts) You can use the `startContent` and `endContent` properties to add content to the start and end of the `DateInput`. You can add a description to the input by passing the `description` property. You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult](https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51). You can use the `value` and `onChange` properties to control the input value. ### [Time Zones](#time-zones) DateInput is time zone aware when a `ZonedDateTime` object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated. [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/) includes functions for parsing strings in multiple formats into `ZonedDateTime` objects. ### [Granularity](#granularity) The granularity prop allows you to control the smallest unit that is displayed by DateInput By default, the value is displayed with "day" granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" granularity. ### [Min Date And Max Date](#min-date-and-max-date) The minValue and maxValue props can also be used to ensure the value is within a specific range. ### [International Calendar](#international-calendar) DateInput supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html) component. ### [Hide Time Zone](#hide-time-zone) When a `ZonedDateTime` object is provided as the value to DateInput, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the hideTimeZone option. ### [Hourly Cycle](#hourly-cycle) By default, DateInput displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the `hourCycle` prop if needed for a specific usecase. This example forces DateInput to use 24-hour time, regardless of the locale. - base: Input wrapper, it handles alignment, placement, and general appearance. - label: Label of the date-input, it is the one that is displayed above, inside or left of the date-input. - inputWrapper: Wraps the `label` (when it is inside) and the `innerWrapper`. - input: The date-input element. - innerWrapper: Wraps the `input`, the `startContent` and the `endContent`. - clearButton: The clear button, it is at the end of the input. - helperWrapper: Wraps the `description` and the `errorMessage`. - description: The description of the date-input. - errorMessage: The error message of the date-input. `DateInput` has the following attributes on the `base` element: - data-slot: All slots have this prop. which slot the element represents(e.g. `slot`). - data-invalid: When the date-input is invalid. Based on `isInvalid` prop. - data-required: When the date-input is required. Based on `isRequired` prop. - data-readonly: When the date-input is readonly. Based on `isReadOnly` prop. - data-disabled: When the date-input is disabled. Based on `isDisabled` prop. - data-has-helper: When the date-input has helper text(`errorMessage` or `description`). Base on those two props. - data-has-start-content: When the date-input has a start content. Base on those `startContent` prop. - data-has-end-content: When the date-input has a end content. Base on those `endContent` prop. - Built with a native `` element. - Visual and ARIA labeling support. - Change, clipboard, composition, selection, and input event support. - Required and invalid states exposed to assistive technology via ARIA. - Support for description and error message help text linked to the input via ARIA. - Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale. - Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers. ### [DateInput Props](#dateinput-props) `placeholderValue` `locale` `hideTimeZone` ` Partial> ` ### [DateInput Events](#dateinput-events) ` (value: ZonedDateTime \| CalendarDate \| CalendarDateTime) => void ` CodeDate Picker [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/date-input.mdx) - [Time Zones](#time-zones) - [Granularity](#granularity) - [Min Date And Max Date](#min-date-and-max-date) - [International Calendar](#international-calendar) - [Hide Time Zone](#hide-time-zone) - [Hourly Cycle](#hourly-cycle) - [DateInput Props](#dateinput-props) - [DateInput Events](#dateinput-events) [Back to top](#dateinput) ## Content from https://www.heroui.com/docs/components/date-picker DatePicker \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # DatePicker DatePickers combine a DateInput and a Calendar popover to allow users to enter or select a date and time value. [Storybook](https://storybook.heroui.com/?path=/story/components-datepicker--default)[@heroui/date-picker](https://www.npmjs.com/package/@heroui/date-picker)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/date-picker)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/date-picker.ts) You can add a description to the date-picker by passing the `description` property. ### [With Month and Year Pickers](#with-month-and-year-pickers) You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature. ### [With Time Fields](#with-time-fields) ### [Selector Icon](#selector-icon) You can use the `selectorIcon` to add content to the start and end of the date-picker. ### [Selector Button Placement](#selector-button-placement) You can change the position of the selector button by setting the `selectorButtonPlacement` property to `start` or `end`. DatePicker is time zone aware when a `ZonedDateTime` object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated. The granularity prop allows you to control the smallest unit that is displayed by DatePicker By default, the value is displayed with "day" granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" granularity. DatePicker supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html) component. DatePicker supports marking certain dates as unavailable. These dates cannot be selected by the user and are displayed with a crossed out appearance in the calendar. In the date field, an invalid state is displayed if a user enters an unavailable date. By default, the calendar popover displays a single month. The `visibleMonths` prop allows displaying up to 3 months at a time, if screen space permits. ### [Page Behavior](#page-behavior) ### [Preset](#preset) - selectorButton: Selector button element. - selectorIcon: Selector icon element. - popoverContent: The calendar popover element. - calendar: The calendar element. - calendarContent: The calendar's content element. - timeInputLabel: The time-input component's label element. - timeInput: The time-input component element. `DatePicker` has the following attributes on the `base` element: - data-slot: All slots have this prop. which slot the element represents(e.g. `calendar`). - data-open: Indicates if the calendar popover is open. - data-invalid: When the date-picker is invalid. Based on `isInvalid` prop. - data-required: When the date-picker is required. Based on `isRequired` prop. - data-readonly: When the date-picker is readonly. Based on `isReadOnly` prop. - data-disabled: When the date-picker is disabled. Based on `isDisabled` prop. - Users can also open a calendar popover to select dates in a standard month grid. - Localized screen reader messages are included to announce when the selection and visible date range change. - Integrates with HTML forms, supporting required, minimum and maximum values, unavailable dates, custom validation functions, realtime validation, and server-side validation errors ### [DatePicker Props](#datepicker-props) ` ZonedDateTime \| CalendarDate \| CalendarDateTime \| undefined \| null ` ` (value: MappedDateValue) => ValidationError \| true \| null \| undefined ` ` PageBehavior ` `hourCycle` ` 12 \| 24 ` `granularity` ` day \| hour \| minute \| second ` `shouldForceLeadingZeros` `CalendarBottomContent` ` boolean \| undefined ` ` PopoverProps \| undefined ` `"{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }"` ` ButtonProps \| undefined ` `"{ size: "sm", variant: "light", radius: "full", isIconOnly: true }"` `calendarProps` ` CalendarProps \| undefined ` `timeInputProps` ` TimeInputProps \| undefined ` ` Partial> ` ### [DatePicker Events](#datepicker-events) Date InputDate Range Picker [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/date-picker.mdx) - [With Month and Year Pickers](#with-month-and-year-pickers) - [With Time Fields](#with-time-fields) - [Selector Icon](#selector-icon) - [Selector Button Placement](#selector-button-placement) - [Page Behavior](#page-behavior) - [Preset](#preset) - [DatePicker Props](#datepicker-props) - [DatePicker Events](#datepicker-events) [Back to top](#datepicker) ## Content from https://www.heroui.com/docs/components/date-range-picker Date Range Picker \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Date Range Picker Date Range Picker combines two DateInputs and a RangeCalendar popover to allow users to enter or select a date and time range. [Storybook](https://storybook.heroui.com/?path=/story/components-date-picker--default)[@heroui/date-picker](https://www.npmjs.com/package/@heroui/date-picker)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/date-picker)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/date-picker.ts) If you pass the `isRequired` property to the input, it will have a `danger` asterisk at the end of the label and the input will be required. DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value. You can use the `selectorIcon` to add content to the start and end of the date-range-picker. DateRangePicker is time zone aware when a `ZonedDateTime` object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated. The granularity prop allows you to control the smallest unit that is displayed by DateRangePicker By default, the value is displayed with "day" granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" granularity. DateRangePicker supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html) component. DateRangePicker supports marking certain dates as unavailable. These dates cannot be selected by the user and are displayed with a crossed out appearance in the calendar. In the date field, an invalid state is displayed if a user enters an unavailable date. ### [Non Contiguous](#non-contiguous) The allowsNonContiguousRanges prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the onChange event will still be a single range with a start and end property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic. - base: base element. it handles alignment, placement, and general appearance. - label: Label of the date-range-picker, it is the one that is displayed above, inside or left of the date-input. - input: The input element. - segment: The segment element. - separator: The separator element. - bottomContent: The bottom content element. - timeInputWrapper: The wrapper element for the input element. You can customize the `DateRangePicker` component by passing custom Tailwind CSS classes to the component slots. `DateRangePicker` has the following attributes on the `base` element: - data-slot: All slots have this prop. which slot the element represents(e.g. `canlendar`). - data-invalid: When the date-range-picker is invalid. Based on `isInvalid` prop. - data-required: When the date-range-picker is required. Based on `isRequired` prop. - data-readonly: When the date-range-picker is readonly. Based on `isReadOnly` prop. - data-disabled: When the date-range-picker is disabled. Based on `isDisabled` prop. - data-has-start-content: When the date-range-picker has a start content. Base on those `startContent` prop. - data-has-end-content: When the date-range-picker has a end content. Base on those `endContent` prop. - data-has-multiple-months: When the date-range-picker's `visibleMonth` is more than 2. - Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale - Users can also open a calendar popover to select date ranges in a standard month grid. Localized screen reader messages are included to announce when the selection and visible date range change. - Date segments are editable using an easy to use numeric keypad, date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers. ### [DateRangePicker Props](#daterangepicker-props) ` RangeValue \| undefined \| null ` ` (value: RangeValue>) => ValidationError \| true \| null \| undefined ` `startName` `endName` `isOpen` `defaultOpen` `allowsNonContiguousRanges` `CalendarTopContent` `selectorButtonPlacement` `"end"` ` CalendarProps ` ` TimeInputProps ` ` Partial> ` ### [DateRangePicker Events](#daterangepicker-events) ` (value: RangeValue) => void ` ` (isOpen: boolean) => void ` Date PickerDivider [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/date-range-picker.mdx) - [Non Contiguous](#non-contiguous) - [DateRangePicker Props](#daterangepicker-props) - [DateRangePicker Events](#daterangepicker-events) [Back to top](#date-range-picker) ## Content from https://www.heroui.com/docs/components/divider Divider \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Divider Divider is a component that separates content in a page. [Storybook](https://storybook.heroui.com/?path=/story/components-divider--default)[@heroui/divider](https://www.npmjs.com/package/@heroui/divider)[React Aria](https://react-spectrum.adobe.com/react-aria/useSeparator.html)[Server component](https://nextjs.org/docs/app/building-your-application/rendering/server-components)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/divider)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/divider.ts) `Divider` has the following attributes on the `base` element: - data-orientation: The orientation of the divider. Based on `orientation` prop. - Separator role is added to the divider. - Support for horizontal and vertical orientation. - Support for HTML ` ` element or a custom element type. ### [Divider Props](#divider-props) `` `horizontal` \| `vertical` `` ``"`horizontal`"`` Date Range PickerDropdown [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/divider.mdx) - [Divider Props](#divider-props) [Back to top](#divider) ## Content from https://www.heroui.com/docs/components/drawer Drawer \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Drawer Displays a panel that slides in from the edge of the screen, containing supplementary content. [Storybook](https://storybook.heroui.com/?path=/story/components-drawer--default)[@heroui/drawer](https://www.npmjs.com/package/@heroui/drawer)[React Aria](https://react-spectrum.adobe.com/react-aria/useModal.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/drawer)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/drawer.ts) HeroUI exports 5 drawer-related components: - Drawer: The main component to display a drawer. - DrawerContent: The wrapper of the other drawer components. - DrawerHeader: The header of the drawer. - DrawerBody: The body of the drawer. - DrawerFooter: The footer of the drawer. When the drawer opens: - Focus is bounded within the drawer and set to the first tabbable element. - Content behind a drawer is inert, meaning that users cannot interact with it. ### [Non-dismissible](#non-dismissible) By default, the drawer can be closed by clicking on the overlay or pressing the Esc key. You can disable this behavior by setting the following properties: - Set the `isDismissable` property to `false` to prevent the drawer from closing when clicking on the overlay. - Set the `isKeyboardDismissDisabled` property to `true` to prevent the drawer from closing when pressing the Esc key. ### [Drawer placement](#drawer-placement) The drawer can be placed on any edge of the screen using the `placement` prop: - `left` - `right` (default) - `top` - `bottom` ### [With Form](#with-form) The `Drawer` handles the focus within the drawer content. It means that you can use the drawer with form elements without any problem. The focus returns to the trigger when the drawer closes. > Note: You can add the `autoFocus` prop to the first `Input` component to focus it when the drawer opens. ### [Backdrop](#backdrop) The `Drawer` component has a `backdrop` prop to show a backdrop behind the drawer. The backdrop can be either `transparent`, `opaque` or `blur`. The default value is `opaque`. Drawer offers a `motionProps` property to customize the `enter` / `exit` animation. Credits The Drawer component design is inspired by [Luma](https://x.com/LumaHQ). - wrapper: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots. - base: The main slot of the drawer content. - backdrop: The backdrop slot, it is displayed behind the drawer. - header: The header of the drawer, it is displayed at the top of the drawer. - body: The body of the drawer, it is displayed in the middle of the drawer. - footer: The footer of the drawer, it is displayed at the bottom of the drawer. - closeButton: The close button of the drawer. `Drawer` has the following attributes on the `base` element: - data-open: When the drawer is open. Based on drawer state. - data-dismissable: When the drawer is dismissable. Based on `isDismissable` prop. - Content outside the drawer is hidden from assistive technologies while it is open. - The drawer optionally closes when interacting outside, or pressing the Esc key. - Focus is moved into the drawer on mount, and restored to the trigger element on unmount. - While open, focus is contained within the drawer, preventing the user from tabbing outside. - Scrolling the page behind the drawer is prevented while it is open, including in mobile browsers. ### [Drawer Props](#drawer-props) ` xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl \| full ` ` left \| right \| top \| bottom ` `"right"` `isDismissable` `isKeyboardDismissDisabled` `shouldBlockScroll` `hideCloseButton` `closeButton` `portalContainer` ` HTMLElement ` `"document.body"` ` Partial> ` ### [Drawer Events](#drawer-events) ### [Drawer types](#drawer-types) DropdownForm [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/drawer.mdx) - [Non-dismissible](#non-dismissible) - [Drawer placement](#drawer-placement) - [With Form](#with-form) - [Backdrop](#backdrop) - [Drawer Props](#drawer-props) - [Drawer Events](#drawer-events) - [Drawer types](#drawer-types) [Back to top](#drawer) ## Content from https://www.heroui.com/docs/components/dropdown Dropdown \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Dropdown Displays a list of actions or options that a user can choose. [Storybook](https://storybook.heroui.com/?path=/story/components-dropdown--default)[@heroui/dropdown](https://www.npmjs.com/package/@heroui/dropdown)[React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/dropdown)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/dropdown.ts) HeroUI exports 5 dropdown-related components: - Dropdown: The main component, which is a wrapper for the other components. This component is an extension of the [Popover](/docs/components/popover) component, so it accepts all the props of the Popover component. - DropdownTrigger: The component that triggers the dropdown menu to open. - DropdownMenu: The component that contains the dropdown items. - DropdownSection: The component that contains a group of dropdown items. - DropdownItem: The component that represents a dropdown item. Dropdown follows the [Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html), accepting both static and dynamic collections. ### [Disabled Keys](#disabled-keys) Dropdown items can be disabled using the `disabledKeys` prop to the `DropdownMenu` component. > Note: It's important to have a unique key for each item, otherwise the disabled keys will not work. ### [Action event](#action-event) You can use the `onAction` prop to get the key of the selected item. You can use the `variant` in the `DropdownMenu` component to change the `hover` style of the dropdown items. ### [Single Selection](#single-selection) You can set the `selectionMode` property as `single` to allow the user to select only one item at a time. ### [Multiple Selection](#multiple-selection) You can set the `selectionMode` property as `multiple` to allow the user to select multiple items at a time. > Note: To allow empty selection, you can set the `disallowEmptySelection` property as `false`. ### [With Shortcut](#with-shortcut) You can use the `shortcut` prop to add a shortcut to the dropdown item. > Note: Dropdown does not handle the shortcut event, you need to handle it yourself. It is possible to add icons to the dropdown items using the `startContent` / `endContent` props. > Note: If you use `currentColor` as the icon color, the icon will have the same color as the item text. You can use the `description` prop to add a description to the dropdown item. You can use the `DropdownSection` component to group dropdown items. > Note: Sections without a `title` must provide an `aria-label` for accessibility. ### [Custom Trigger](#custom-trigger) You can use any component as a trigger for the dropdown menu, just wrap it in the `DropdownTrigger` component. ### [Changing the backdrop](#changing-the-backdrop) As we mentioned earlier, the `Dropdown` component is an extension of the [Popover](/docs/components/popover) component, so it accepts all the props of the Popover component, including the `backdrop` prop. The `` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). See the [Routing](/docs/guide/routing) guide to learn how to set this up. Dropdown has 3 components with slots the `DropdownMenu`, `DropdownItem` and `DropdownSection` components. ### [DropdownMenu](#dropdownmenu) - base: The main wrapper for the menu component. This slot wraps the `topContent`, `bottomContent` and the `list` slot. - list: The slot for the menu list component. You can see this slot as the `ul` slot. - emptyContent: The slot content to display when the collection is empty. ### [DropdownItem](#dropdownitem) - base: The main slot for the dropdown item. It wraps all the other slots. - wrapper: The `title` and `description` wrapper. - title: The title of the dropdown item. - description: The description of the dropdown item. - shortcut: The shortcut slot. - selectedIcon: The selected icon slot. This is only visible when the item is selected. ### [DropdownSection](#dropdownsection) - base: The main slot for the dropdown section. It wraps all the other slots. - heading: The title that is render on top of the section group. - group: The group of dropdown items. - divider: The divider that is render between the groups. This is only visible when `showDivider` is `true`. ### [Customizing the dropdown popover](#customizing-the-dropdown-popover) The `Dropdown` component is an extension of the [Popover](/docs/components/popover) component, so you can use the same slots to customize the dropdown. ### [Customizing the dropdown items style](#customizing-the-dropdown-items-style) You can customize the dropdown items either by using the `DropdownMenu` `itemClasses` prop or by using the `DropdownItem` slots, the `itemClasses` allows you to customize all the items at once, while the slots allow you to customize each item individually. ### [Keyboard Interactions](#keyboard-interactions) Key Description Space When focus is on `DropdownTrigger`, opens the dropdown menu and focuses the first item. When focus is on an item, activates the focused item. Enter ArrowDown When focus is on `DropdownTrigger`, opens the dropdown menu. When focus is on an item, moves focus to the next item. ArrowUp When focus is on an item, moves focus to the previous item. Esc Closes the dropdown menu and moves focus to `DropdownTrigger`. A-Z or a-z When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. `DropdownItem` has the following attributes on the `base` element: - data-disabled: When the dropdown item is disabled. Based on dropdown `disabledKeys` prop. - data-selected: When the dropdown item is selected. Based on dropdown `selectedKeys` prop. - data-hover: When the dropdown item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-pressed: When the dropdown item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-focus: When the dropdown item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the dropdown item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Exposed to assistive technology as a `button` with a `menu` using ARIA. - Support for single, multiple, or no selection. - Support for disabled items. - Support for sections. - Complex item labeling support for accessibility. - Keyboard navigation support including arrow keys, home/end, page up/down. See [Keyboard Interactions](#keyboard-interactions) for more details. - Automatic scrolling support during keyboard navigation. - Keyboard support for opening the menu using the arrow keys, including automatically focusing the first or last item accordingly. - Typeahead to allow focusing items by typing text. - Virtualized scrolling support for performance with long lists. ### [Dropdown Props](#dropdown-props) `type` ` menu \| listbox ` `"menu"` `trigger` ` press \| longPress ` `"press"` `closeOnSelect` `PopoverProps` ### [Dropdown Events](#dropdown-events) `shouldCloseOnInteractOutside` ` (e: HTMLElement) => void ` ### [DropdownTrigger Props](#dropdowntrigger-props) ### [DropdownMenu Props](#dropdownmenu-props) ` ReactNode \| ((item: T) => ReactElement) ` ` solid \| bordered \| light \| flat \| faded \| shadow ` ` all \| Iterable ` ` Iterable ` ` boolean \| first \| last ` `emptyContent` `"No items."` `hideEmptyContent` `hideSelectedIcon` `shouldFocusWrap` ` Partial> ` ` Partial> ` ### [DropdownMenu Events](#dropdownmenu-events) ` (keys: "all" \| Set & {anchorKey?: string; currentKey?: string}) => void ` ### [DropdownSection Props](#dropdownsection-props) ` Record<'base'｜'heading'｜'group'｜'divider', string>> ` ` Record<'base'｜'wrapper'｜'title'｜'description'｜'shortcut'｜'selectedIcon', string>> ` ### [DropdownItem Props](#dropdownitem-props) `key` ` string \| ReactNode ` `textValue` `shortcut` `selectedIcon` ` SelectedIconProps ` `href` `target` ` HTMLAttributeAnchorTarget ` `rel` `download` ` boolean \| string ` `ping` `referrerPolicy` ` HTMLAttributeReferrerPolicy ` ### [DropdownItem Events](#dropdownitem-events) #### [Dropdown Item Selected Icon Props](#dropdown-item-selected-icon-props) DividerDrawer [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/dropdown.mdx) - [Disabled Keys](#disabled-keys) - [Action event](#action-event) - [Single Selection](#single-selection) - [Multiple Selection](#multiple-selection) - [With Shortcut](#with-shortcut) - [Custom Trigger](#custom-trigger) - [Changing the backdrop](#changing-the-backdrop) - [DropdownMenu](#dropdownmenu) - [DropdownItem](#dropdownitem) - [DropdownSection](#dropdownsection) - [Customizing the dropdown popover](#customizing-the-dropdown-popover) - [Customizing the dropdown items style](#customizing-the-dropdown-items-style) - [Keyboard Interactions](#keyboard-interactions) - [Dropdown Props](#dropdown-props) - [Dropdown Events](#dropdown-events) - [DropdownTrigger Props](#dropdowntrigger-props) - [DropdownMenu Props](#dropdownmenu-props) - [DropdownMenu Events](#dropdownmenu-events) - [DropdownSection Props](#dropdownsection-props) - [DropdownItem Props](#dropdownitem-props) - [DropdownItem Events](#dropdownitem-events) - [Dropdown Item Selected Icon Props](#dropdown-item-selected-icon-props) [Back to top](#dropdown) ## Content from https://www.heroui.com/docs/components/form Form \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Form A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors. [Storybook](https://storybook.heroui.com/?path=/story/components-form--default)[@heroui/form](https://www.npmjs.com/package/@heroui/form)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/form)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/form.ts) ## [Anatomy](#anatomy) A `Form` is a container for input elements and submit/reset buttons, with support for validation messages. When labeled with `aria-label` or `aria-labelledby`, it becomes a navigable [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html) for assistive technology. ## [Events](#events) The `onSubmit` event will be triggered when a user submits the form with the `Enter` key or by pressing a submit button. The onReset event will be triggered when a user presses a reset button. ## [Validation](#validation) `Form` supports native HTML constraint validation with customizable UI, custom validation functions, and server-side validation. Server-side validation errors can be provided via the `validationErrors` prop as an object mapping field names to error messages, which are cleared when the user modifies the field. See the [Forms](/docs/guide/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries. ### [Validation Behavior](#validation-behavior) `Form` validation uses native validation behavior by default, but can be switched to ARIA validation by setting `validationBehavior="aria"`. ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level. To set the default behavior at the app level, you can change the form defaults for your entire app using [HeroUI Provider](/docs/api-references/heroui-provider). - Built with a native HTML ` ` element, with support for ARIA labelling to create a [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html). - Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors. ### [Form Props](#form-props) ` 'native' \| 'aria' ` `validationErrors` ` Record ` `action` ` string \| FormHTMLAttributes['action'] ` `encType` ` 'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain' ` `method` ` 'get' \| 'post' \| 'dialog' ` ` '_blank' \| '_self' \| '_parent' \| '_top' ` `autoComplete` ` 'off' \| 'on' ` `autoCapitalize` ` 'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters' ` `className` `style` ` CSSProperties ` DrawerImage [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/form.mdx) - [Anatomy](#anatomy) - [Validation](#validation) - [Validation Behavior](#validation-behavior) - [Form Props](#form-props) [Back to top](#form) ## Content from https://www.heroui.com/docs/components/image Image \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Image The Image component is used to display images with support for fallback. [Storybook](https://storybook.heroui.com/?path=/story/components-image--default)[@heroui/image](https://www.npmjs.com/package/@heroui/image)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/image)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/image.ts) ### [Blurred](#blurred) You can use the `isBlurred` prop to duplicate the image and blur it to create a blurred effect. ### [Zoomed](#zoomed) You can use the `isZoomed` prop make the image zoomed when hovered. ### [Animated Loading](#animated-loading) Image component has a built-in `skeleton` animation to indicate the image is loading and an `opacity` animation when the image loads. > Note: The `URL` uses `https://app.requestly.io/delay` to simulate a slow network. ### [Image with fallback](#image-with-fallback) You can use the `fallbackSrc` prop to display a fallback image when: - The `fallbackSrc` prop is provided. - The image provided in `src` is still loading. - The image provided in `src` fails to load. - The image provided in `src` is not found. ### [With Next.js Image](#with-nextjs-image) Next.js provides an optimized [Image](https://nextjs.org/docs/app/api-reference/components/image) component, you can use it with HeroUI `Image` component as well. > Note: HeroUI's `Image` component is `client-side`, using hooks like `useState` for loading states and animations. Use Next.js `Image` alone if these features aren't required. - img: Slot for the image element. - wrapper: Image wrapper, it handles alignment, placement, and general appearance. - zoomedWrapper: The wrapper slot for the zoomed image it avoids the image content to overflow the parent container. - blurredImg: The wrapper slot for the duplicated blurred image. ### [Image Props](#image-props) `srcSet` `sizes` `alt` `width` `height` `loading` ` eager \| lazy ` `fallbackSrc` `isZoomed` `removeWrapper` `disableSkeleton` ` Partial> ` ### [Image Events](#image-events) `onLoad` ` ReactEventHandler ` `onError` FormInput [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/image.mdx) - [Blurred](#blurred) - [Zoomed](#zoomed) - [Animated Loading](#animated-loading) - [Image with fallback](#image-with-fallback) - [With Next.js Image](#with-nextjs-image) - [Image Props](#image-props) - [Image Events](#image-events) [Back to top](#image) ## Content from https://www.heroui.com/docs/components/input Input \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Input Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more. [Storybook](https://storybook.heroui.com/?path=/story/components-input--default)[@heroui/input](https://www.npmjs.com/package/@heroui/input)[React Aria](https://react-spectrum.adobe.com/react-aria/useTextField.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/input)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/input.ts) ### [Password Input](#password-input) You can use the `type` property to change the input type to `password`. ### [Clear Button](#clear-button) If you pass the `isClearable` property to the input, it will have a clear button at the end of the input, it will be visible when the input has a value. You can use the `startContent` and `endContent` properties to add content to the start and end of the input. You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. `errorMessage` is only shown when `isInvalid` is set to `true`. Example with `regex` email validation: You can use the `value` and `onValueChange` properties to control the input value. > Note: HeroUI `Input` also supports native events like `onChange`, useful for form libraries such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/). `Input` can be used with a `Form` component to leverage form state management. For more on form and validation behaviors, see the [Forms](/docs/guide/forms) guide. #### [Built-in Validation](#built-in-validation) `Input` supports the following [native HTML constraints](https://developer.mozilla.org/docs/Web/HTML/Constraint_validation): - `isRequired` indicates that a field must have a value before the form can be submitted. - `minLength` and `maxLength` specify the minimum and length of text input. - `pattern` provides a custom regular expression that a text input must conform to. - `type="email"` and `type="url"` provide built-in validation for email addresses and URLs. When using native validation, error messages can be customized by passing a function to `errorMessage` and checking the [ValidityState](https://developer.mozilla.org/docs/Web/API/ValidityState) of `validationDetails`. #### [Custom Validation](#custom-validation) In addition to built-in constraints, you can provide a function to the `validate` property for custom validation. #### [Realtime Validation](#realtime-validation) If you want to display validation errors while the user is typing, you can control the field value and use the `isInvalid` prop along with the `errorMessage` prop. #### [Server Validation](#server-validation) Client-side validation provides immediate feedback, but you should also validate data on the server to ensure accuracy and security. HeroUI allows you to display server-side validation errors by using the `validationErrors` prop in the `Form` component. This prop should be an object where each key is the field `name` and the value is the error message. - label: Label of the input, it is the one that is displayed above, inside or left of the input. - mainWrapper: Wraps the `inputWrapper` when position is `outside` / `outside-left`. - description: The description of the input. - errorMessage: The error message of the input. You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots. In case you need to customize the input even further, you can use the `useInput` hook to create your own implementation. `Input` has the following attributes on the `base` element: - data-invalid: When the input is invalid. Based on `isInvalid` prop. - data-required: When the input is required. Based on `isRequired` prop. - data-readonly: When the input is readonly. Based on `isReadOnly` prop. - data-hover: When the input is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-focus: When the input is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-within: When the input is being focused or any of its children. Based on [useFocusWithin](https://react-spectrum.adobe.com/react-aria/useFocusWithin.html). - data-focus-visible: When the input is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-disabled: When the input is disabled. Based on `isDisabled` prop. ### [Input Props](#input-props) ` (value: string) => ValidationError \| true \| null \| undefined ` `minLength` `maxLength` `pattern` ` text \| email \| url \| password \| tel \| search \| file ` `"text"` `baseRef` ` RefObject ` ` Partial> ` ### [Input Events](#input-events) `onClear` ImageInput OTP [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/input.mdx) - [Password Input](#password-input) - [Clear Button](#clear-button) - [Built-in Validation](#built-in-validation) - [Custom Validation](#custom-validation) - [Realtime Validation](#realtime-validation) - [Server Validation](#server-validation) - [Input Props](#input-props) - [Input Events](#input-events) [Back to top](#input) ## Content from https://www.heroui.com/docs/components/input-otp Input OTP \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Input OTP The InputOtp component enables users to enter one-time passwords (OTP). It is built on top of the [input-otp](https://github.com/guilhermerodz/input-otp) library by [@guilherme\_rodz](https://twitter.com/guilherme_rodz). [Storybook](https://storybook.heroui.com/?path=/story/components-input-otp--default)[@heroui/input-otp](https://www.npmjs.com/package/@heroui/input-otp)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/input-otp)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/input-otp.ts) ## [Disabled](#disabled) The `isDisabled` prop disables user interaction with the `InputOtp` component. ## [Read Only](#read-only) The `isReadOnly` prop makes the `InputOtp` component read-only while maintaining its visual appearance. ## [Required](#required) The `isRequired` prop marks the `InputOtp` as a required field. ## [Sizes](#sizes) The size of the `InputOtp` can be customized using the `size` prop. The default value is `md`. ## [Colors](#colors) Color of the `InputOtp` can be changed by `color` property. ## [Variants](#variants) Styling/Variant of the `InputOtp` can be changed by `variant` property. By default, `variant` property is set to `flat`. ## [Radius](#radius) Radius of the `InputOtp` can be changed by `radius` property. By default, `radius` property is set to `md`. ## [Password](#password) `InputOtp` can be used as password/secured-pin input by setting `type` as `password`. ## [Description](#description) Description of the `InputOtp` can be set by `description` property. ## [Error Message](#error-message) Custom error message of the `InputOtp` can be set by `errorMessage` property. ## [Allowed Keys](#allowed-keys) - The `InputOtp` component only accepts specified input keys. Any other input is ignored. - You can customize the allowed keys using the `allowedKeys` prop, which accepts a regex pattern. - By default, `allowedKeys` is set to `^[0-9]$` (only numerical digits). ## [Controlled](#controlled) ## [React Hook Form](#react-hook-form) You can use `InputOtp` with React Hook Form for form validation and submission handling. ## [Different Lengths & Validation](#different-lengths--validation) The `InputOtp` component supports different lengths through the `length` property. You can set the number of input segments by passing a number value to the `length` prop. Common use cases include 4-digit PINs and 6-digit authentication codes. ## [Custom Styles](#custom-styles) You can customize the styles of the `InputOtp` component using the `classNames` prop. - base: InputOtp wrapper, it handles alignment, placement, and general appearance. - wrapper: Wraps the underlying input-otp component. Sent as `containerClassName` prop to underlying input-otp component. - segmentWrapper: Wraps all the segment elements. - caret: The caret represents the typing indicator of the input-otp component. - passwordChar: The passwordChar represents the text styling when input-type is password. - description: The description of the input-otp. - errorMessage: The error message of the input-otp. `InputOtp` has the following attributes on the `base` element: - data-invalid: When the input-otp is invalid. Based on `isInvalid` prop. - data-required: When the input-otp is required. Based on `isRequired` prop. - data-readonly: When the input-otp is readonly. Based on `isReadOnly` prop. - data-filled: When the input-otp is completely filled. - data-disabled: When the input-otp is disabled. Based on `isDisabled` prop. `InputOtp` also has the following attributes on the `segment` element: - data-active: When the segment is active. - data-focus: When the segment is focused. - data-focus-visible: When the segment is focused visible. - data-has-value: When the segment has value. - Built on top of [input-otp](https://github.com/guilhermerodz/input-otp). - Support for description and error message help text linked to the input-otp via ARIA. - Keyboard navigation: - Tab: Moves focus between input segments - Arrow keys: Navigate between segments - Backspace: Clears current segment and moves focus to previous segment - ARIA attributes: - `aria-invalid`: Indicates validation state - `aria-required`: Indicates if the input is required ### [InputOtp Props](#inputotp-props) `length` `"4"` `allowedKeys` ` regEx string ` `"^[0-9]$"` ` Partial> ` `textAlign` ` left \| center \| right ` `"center"` `pushPasswordManagerStrategy` ` 'none' \| 'hidden' \| 'input' ` `pasteTransformer` ` (text: string) => string ` `containerClassName` `noScriptCSSFallback` ### [InputOtp Events](#inputotp-events) `onComplete` InputKbd [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/input-otp.mdx) - [Password](#password) - [Description](#description) - [Error Message](#error-message) - [Allowed Keys](#allowed-keys) - [React Hook Form](#react-hook-form) - [Different Lengths & Validation](#different-lengths--validation) - [InputOtp Props](#inputotp-props) - [InputOtp Events](#inputotp-events) [Back to top](#input-otp) ## Content from https://www.heroui.com/docs/components/kbd Keyboard Key \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Keyboard Key Keyboard key is a component to display which key or combination of keys performs a given action. [Storybook](https://storybook.heroui.com/?path=/story/components-kbd--default)[@heroui/kbd](https://www.npmjs.com/package/@heroui/kbd)[Server component](https://nextjs.org/docs/app/building-your-application/rendering/server-components)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/kbd)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/kbd.ts) ### [Keys](#keys) > Note: Check the [API](#keyboard-keys) section to see all available keys. - base: Kbd wrapper, it handles alignment, placement, and general appearance. - abbr: The `keys` wrapper that handles the appearance of the keys. - content: The children wrapper that handles the appearance of the content. - Each command `key` has a `title` attribute that describes the action that the key performs. ### [Keyboard Key Props](#keyboard-key-props) `keys` ` KbdKey \| KbdKey[] ` ` Partial> ` ### [Keyboard Keys](#keyboard-keys) List of supported keys. Input OTPLink [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/kbd.mdx) - [Keys](#keys) - [Keyboard Key Props](#keyboard-key-props) - [Keyboard Keys](#keyboard-keys) [Back to top](#keyboard-key) ## Content from https://www.heroui.com/docs/components/link Link \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Link Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `` [Storybook](https://storybook.heroui.com/?path=/story/components-link--default)[@heroui/link](https://www.npmjs.com/package/@heroui/link)[React Aria](https://react-spectrum.adobe.com/react-aria/useLink.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/link)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/link.ts) ### [Underline](#underline) ### [External](#external) If you pass the `isExternal` prop, the link will have the `target="_blank"` and `rel="noopener noreferrer"` attributes. ### [Custom Anchor Icon](#custom-anchor-icon) ### [Block Link](#block-link) If you pass the `isBlock` prop, the link will be rendered as a block element with a `hover` effect. ### [Polymorphic Component](#polymorphic-component) HeroUI's components expose a `as` prop that allows you to customize the React element type that is used to render the component. The `` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). See the [Routing](/docs/guide/routing) guide to learn how to set this up. In case you need to customize the link even further, you can use the `useLink` hook to create your own implementation. `Link` has the following attributes on the `base` element: - data-focus: When the link is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html) - data-focus-visible: When the link is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html) - data-disabled: When the link is disabled. Based on `isDisabled` prop. - Support for mouse, touch, and keyboard interactions. - Support for disabled links. - Keyboard users may activate links using the Enter key. ### [Link Props](#link-props) ` none \| hover \| always \| active \| focus ` `isExternal` `showAnchorIcon` `anchorIcon` `isBlock` ### [Link Events](#link-events) KbdListbox [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/link.mdx) - [Underline](#underline) - [External](#external) - [Custom Anchor Icon](#custom-anchor-icon) - [Block Link](#block-link) - [Polymorphic Component](#polymorphic-component) - [Link Props](#link-props) - [Link Events](#link-events) [Back to top](#link) ## Content from https://www.heroui.com/docs/components/listbox Listbox \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Listbox A listbox displays a list of options and allows a user to select one or more of them. [Storybook](https://storybook.heroui.com/?path=/story/components-listbox--default)[@heroui/listbox](https://www.npmjs.com/package/@heroui/listbox)[React Aria](https://react-spectrum.adobe.com/react-aria/useListBox.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/listbox)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/listbox.ts) HeroUI exports 3 listbox-related components: - Listbox: The main component, which is a wrapper for the other components. - ListboxSection: The component that contains a group of listbox items. - ListboxItem: The component that represents a listbox item. Listbox follows the [Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html), accepting both static and dynamic collections. Listbox items can be disabled using the `disabledKeys` prop to the `Listbox` component. You can use the `variant` in the `Listbox` component to change the `hover` style of the listbox items. It is possible to add icons to the listbox items using the `startContent` / `endContent` props. You can use the `description` prop to add a description to the listbox item. ### [With Top & Bottom Content](#with-top--bottom-content) You can use the `topContent` and `bottomContent` props to add content above and below the listbox items. You can use the `ListboxSection` component to group listbox items. The `` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). See the [Routing](/docs/guide/routing) guide to learn how to set this up. Listbox supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`. Here's an example of using virtualization with 10,000 items. Listbox has 3 components with slots the base one `Listbox`, `ListboxItem` and `ListboxSection` components. ### [Listbox](#listbox-1) - base: The main wrapper for the listbox component. This slot wraps the `topContent`, `bottomContent` and the `list` slot. - list: The slot for the listbox component. You can see this slot as the `ul` slot. ### [ListboxItem](#listboxitem) - base: The main slot for the listbox item. It wraps all the other slots. - title: The title of the listbox item. - description: The description of the listbox item. ### [ListboxSection](#listboxsection) - base: The main slot for the listbox section. It wraps all the other slots. - group: The group of listbox items. ### [Customizing the listbox](#customizing-the-listbox) You can customize the `Listbox` items style by using the `itemClasses` prop and passing custom Tailwind CSS classes. > Note: In the above example, we've utilized the [Boxicons](https://boxicons.com/) icons collection. Home Moves focus to the first item. End Moves focus to the last item. When focus is on an item, moves focus to the next item. Enter or Space When focus is on an item, selects the item. Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. `ListboxItem` has the following attributes on the `base` element: - data-disabled: When the listbox item is disabled. Based on listbox `disabledKeys` prop. - data-selected: When the listbox item is selected. Based on listbox `selectedKeys` prop. - data-selectable: When the listbox item is selectable. Based on listbox `selectionMode` prop. - data-hover: When the listbox item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-pressed: When the listbox item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-focus: When the listbox item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the listbox item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Exposed to assistive technology as a `listbox` using ARIA. - Tab stop focus management. - Keyboard navigation support including arrow keys, home/end, page up/down, select all, and clear. - Typeahead to allow focusing options by typing text. ### [Listbox Props](#listbox-props) `shouldHighlightOnFocus` `virtualization` ` Record<"maxListboxHeight" & "itemHeight", number> ` ` Partial> ` ` Partial> ` ### [Listbox Events](#listbox-events) ` (keys: React.Key[]) => void ` ### [ListboxSection Props](#listboxsection-props) ` Partial> ` ` Partial> ` ### [ListboxItem Props](#listboxitem-props) ` ListboxItemSelectedIconProps ` ### [ListboxItem Events](#listboxitem-events) #### [Listbox Item Selected Icon Props](#listbox-item-selected-icon-props) LinkModal [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/listbox.mdx) - [With Top & Bottom Content](#with-top--bottom-content) - [Listbox](#listbox-1) - [ListboxItem](#listboxitem) - [ListboxSection](#listboxsection) - [Customizing the listbox](#customizing-the-listbox) - [Listbox Props](#listbox-props) - [Listbox Events](#listbox-events) - [ListboxSection Props](#listboxsection-props) - [ListboxItem Props](#listboxitem-props) - [ListboxItem Events](#listboxitem-events) - [Listbox Item Selected Icon Props](#listbox-item-selected-icon-props) [Back to top](#listbox) ## Content from https://www.heroui.com/docs/components/modal Modal \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Modal Displays a dialog with custom content that requires attention or provides additional information. [Storybook](https://storybook.heroui.com/?path=/story/components-modal--default)[@heroui/modal](https://www.npmjs.com/package/@heroui/modal)[React Aria](https://react-spectrum.adobe.com/react-aria/useModal.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/modal)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/modal.ts) HeroUI exports 5 modal-related components: - Modal: The main component to display a modal. - ModalContent: The wrapper of the other modal components. - ModalHeader: The header of the modal. - ModalBody: The body of the modal. - ModalFooter: The footer of the modal. When the modal opens: - Focus is bounded within the modal and set to the first tabbable element. - Content behind the modal dialog is inert, meaning that users cannot interact with it. By default, the modal can be closed by clicking on the overlay or pressing the Esc key. You can disable this behavior by setting the following properties: - Set the `isDismissable` property to `false` to prevent the modal from closing when clicking on the overlay. - Set the `isKeyboardDismissDisabled` property to `true` to prevent the modal from closing when pressing the Esc key. ### [Modal placement](#modal-placement) By default the modal is centered on screens larger than `sm` and is at the `bottom` of the screen on mobile. This placement is called `auto`, but you can change it by using the `placement` prop. > Note: The `top-center` and `bottom-center` positions mean that the modal is positioned at the top / bottom of the screen on mobile, and at the center of the screen on desktop. ### [Overflow scroll](#overflow-scroll) You can use the `scrollBehavior` prop to set the scroll behavior of the modal. - inside: The modal content will be scrollable. - outside: The modal content will be scrollable and the modal will be fixed. The `Modal` handles the focus within the modal content. It means that you can use the modal with form elements without any problem. The focus returns to the trigger when the modal closes. > Note: You can add the `autoFocus` prop to the first `Input` component to focus it when the modal opens. The `Modal` component has a `backdrop` prop to show a backdrop behind the modal. The backdrop can be either `transparent`, `opaque` or `blur`. The default value is `opaque`. ### [Custom Backdrop](#custom-backdrop) You can customize the backdrop by using the `backdrop` slot. Modal offers a `motionProps` property to customize the `enter` / `exit` animation. ### [Draggable](#draggable) Try to drag the modal by clicking on the modal header and dragging. ### [Draggable Overflow](#draggable-overflow) Setting overflow to `true` allows users to drag the modal to a position where it overflows the viewport. - wrapper: The wrapper slot of the modal. It wraps the `base` and the `backdrop` slots. - base: The main slot of the modal content. - backdrop: The backdrop slot, it is displayed behind the modal. - header: The header of the modal, it is displayed at the top of the modal. - body: The body of the modal, it is displayed in the middle of the modal. - footer: The footer of the modal, it is displayed at the bottom of the modal. - closeButton: The close button of the modal. You can customize the `Modal` component by passing custom Tailwind CSS classes to the component slots. `Modal` has the following attributes on the `base` element: - data-open: When the modal is open. Based on modal state. - data-dismissable: When the modal is dismissable. Based on `isDismissable` prop. - Content outside the modal is hidden from assistive technologies while it is open. - The modal optionally closes when interacting outside, or pressing the Esc key. - Focus is moved into the modal on mount, and restored to the trigger element on unmount. - While open, focus is contained within the modal, preventing the user from tabbing outside. - Scrolling the page behind the modal is prevented while it is open, including in mobile browsers. ### [Modal Props](#modal-props) `backdrop` ` transparent \| opaque \| blur ` `"opaque"` `scrollBehavior` ` normal \| inside \| outside ` `"normal"` ` auto \| top \| center \| bottom ` `"auto"` ### [Modal Events](#modal-events) ### [Modal types](#modal-types) ListboxNavbar [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/modal.mdx) - [Modal placement](#modal-placement) - [Overflow scroll](#overflow-scroll) - [Custom Backdrop](#custom-backdrop) - [Draggable](#draggable) - [Draggable Overflow](#draggable-overflow) - [Modal Props](#modal-props) - [Modal Events](#modal-events) - [Modal types](#modal-types) [Back to top](#modal) ## Content from https://www.heroui.com/docs/components/navbar Navbar \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Navbar A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more. [Storybook](https://storybook.heroui.com/?path=/story/components-navbar--default)[@heroui/navbar](https://www.npmjs.com/package/@heroui/navbar)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/navbar)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/navbar.ts) HeroUI exports 7 navbar-related components: - Navbar: The main component of navbar. - NavbarBrand: The component for branding. - NavbarContent: The component for wrapping navbar items. - NavbarItem: The component for navbar item. - NavbarMenuToggle: The component for toggling navbar menu. - NavbarMenu: The component for wrapping navbar menu items. - NavbarMenuItem: The component for navbar menu item. ### [Static](#static) You can use the `position` prop to make the navbar static positioned (the default behavior is `sticky`). ### [Hide on scroll](#hide-on-scroll) It is possible to hide the navbar on scroll by using the `shouldHideOnScroll` prop. ### [With Menu](#with-menu) You can use the `NavbarMenuToggle` and `NavbarMenu` components to display a togglable menu. If you want to remove the `open` / `close` animation, you can pass the `disableAnimation={true}` prop to `Navbar` component. ### [Controlled Menu](#controlled-menu) You can use the `isMenuOpen` and `onMenuOpenChange` props to control the navbar menu state. ### [With Border](#with-border) You can use the `isBordered` prop to add a bottom border to the navbar. ### [Disabling Blur](#disabling-blur) Navbar has a blur effect by default. You can disable it by using the `isBlurred=false` prop. ### [With Dropdown Menu](#with-dropdown-menu) It is possible to use the [Dropdown](/docs/components/dropdown) component to display a dropdown menu as navbar item. Example of a navbar with avatar and dropdown menu. ### [With Search Input](#with-search-input) Example of a navbar with search input. ### [Customizing the active item](#customizing-the-active-item) When the `NavbarItem` is active, it will have a `data-active` attribute. You can use this attribute to customize it. - base: The main slot for the navbar. It takes the full width of the parent and wraps the navbar elements including the menu. - wrapper: The slot that contains the navbar elements such as `brand`, `content` and `toggle`. - brand: The slot for the `NavbarBrand` component. - content: The slot for the `NavbarContent` component. - item: The slot for the `NavbarItem` component. - toggle: The slot for the `NavbarMenuToggle` component. - toggleIcon: The slot for the `NavbarMenuToggle` icon. - menu: The slot for the `NavbarMenu` component. - menuItem: The slot for the `NavbarMenuItem` component. `Navbar` has the following attributes on the `base` element: - data-menu-open: Indicates if the navbar menu is open. - data-hidden: Indicates if the navbar is hidden. It is used when the `shouldHideOnScroll` prop is `true`. `NavbarContent` - data-justify: The justify content of the navbar content. It takes into account the correct space distribution. `NavbarItem` has the following attributes on the `base` element: - data-active: Indicates if the navbar item is active. It is used when the `isActive` prop is `true`. `NavbarMenuToggle` has the following attributes on the `base` element: - data-open: Indicates if the navbar menu is open. It is used when the `isMenuOpen` prop is `true`. - data-pressed: When the navbar menu toggle is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-hover: When the navbar menu toggle is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-focus-visible: When the navbar menu toggle is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). `NavbarMenuItem` has the following attributes on the `base` element: - data-active: Indicates if the menu item is active. It is used when the `isActive` prop is `true`. ### [Navbar Props](#navbar-props) ` string \| number ` `"4rem (64px)"` `position` ` static \| sticky ` `"sticky"` `maxWidth` ` sm \| md \| lg \| xl \| 2xl \| full ` `parentRef` `"window"` `isMenuOpen` `isMenuDefaultOpen` `shouldHideOnScroll` `disableScrollHandler` ` Partial> ` ### [Navbar Events](#navbar-events) `onMenuOpenChange` `onScrollPositionChange` ` (position: number) => void ` ### [NavbarContent Props](#navbarcontent-props) `justify` ` start \| center \| end ` ### [NavbarItem Props](#navbaritem-props) `isActive` ### [NavbarMenuToggle Props](#navbarmenutoggle-props) ` ReactNode \| ((isOpen: boolean \| undefined) => ReactNode) ` `srOnlyText` `"open/close navigation menu"` ### [NavbarMenuToggle Events](#navbarmenutoggle-events) ### [NavbarMenu Props](#navbarmenu-props) ### [NavbarMenuItem Props](#navbarmenuitem-props) ModalNumber Input [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/navbar.mdx) - [Static](#static) - [Hide on scroll](#hide-on-scroll) - [With Menu](#with-menu) - [Controlled Menu](#controlled-menu) - [With Border](#with-border) - [Disabling Blur](#disabling-blur) - [With Dropdown Menu](#with-dropdown-menu) - [With Search Input](#with-search-input) - [Customizing the active item](#customizing-the-active-item) - [Navbar Props](#navbar-props) - [Navbar Events](#navbar-events) - [NavbarContent Props](#navbarcontent-props) - [NavbarItem Props](#navbaritem-props) - [NavbarMenuToggle Props](#navbarmenutoggle-props) - [NavbarMenuToggle Events](#navbarmenutoggle-events) - [NavbarMenu Props](#navbarmenu-props) - [NavbarMenuItem Props](#navbarmenuitem-props) [Back to top](#navbar) ## Content from https://www.heroui.com/docs/components/number-input Number Input \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Number Input The numeric input component is designed for users to enter a number, and increase or decrease the value using stepper buttons [Storybook](https://storybook.heroui.com/?path=/story/components-number-input--default)[@heroui/number-input](https://www.npmjs.com/package/@heroui/number-input)[React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/number-input)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/number-input.ts) If you pass the `isClearable` property to the input, it will have a clear button at the end of input, it will be visible when input has a value. ### [Hide Stepper](#hide-stepper) You can hide the stepper buttons by passing the `hideStepper` property. You can use the `startContent` and `endContent` properties to add content to the start and end of NumberInput. You can add a label to the input by passing the `label` property. ### [With Min Value](#with-min-value) You can set the minimum value of the input by passing the `minValue` property. ### [With Max Value](#with-max-value) You can set the maximum value of the input by passing the `maxValue` property. ### [With Wheel Disabled](#with-wheel-disabled) By default, you can increase or decrease the value with scroll wheel. You can disable changing the vaule with scroll in NumberInput by passing the `isWheelDisabled` property. ### [With Format Options](#with-format-options) You can format the value of the input by passing the `formatOptions` property. > Note: HeroUI `NumberInput` also supports native events like `onChange`, useful for form libraries such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/). `NumberInput` can be used with a `Form` component to leverage form state management. For more on form and validation behaviors, see the [Forms](/docs/guide/forms) guide. - mainWrapper: Wraps the `inputWrapper` - stepperButton: The stepper button to increase or decrease the value. - stepperWrapper: The wrapper for the stepper. - description: The description of NumberInput. - errorMessage: The error message of NumberInput. You can customize the `NumberInput` component by passing custom Tailwind CSS classes to the component slots. `NumberInput` has the following attributes on the `base` element: - data-filled: When the input has content, placeholder, start content or the placeholder is shown. - data-has-elements: When the input has any element (label, helper text, description, error message). - data-has-helper: When the input has helper text. - data-has-description: When the input has a description. - data-has-label: When the input has a label. - data-has-value: When the input has a value (placeholder is not shown). - Built with a native `` element with `type="number"`. - Support for description, helper text, and error message linked to the input via ARIA. ### [NumberInput Props](#numberinput-props) ` Intl.NumberFormatOptions ` `step` `hideStepper` `isWheelDisabled` `incrementAriaLabel` `decrementAriaLabel` ` Partial> ` ### [NumberInput Events](#numberinput-events) ` (value: number) => void ` NavbarPagination [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/number-input.mdx) - [Hide Stepper](#hide-stepper) - [With Min Value](#with-min-value) - [With Max Value](#with-max-value) - [With Wheel Disabled](#with-wheel-disabled) - [With Format Options](#with-format-options) - [NumberInput Props](#numberinput-props) - [NumberInput Events](#numberinput-events) [Back to top](#number-input) ## Content from https://www.heroui.com/docs/components/pagination Pagination \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Pagination The Pagination component allows you to display active page and navigate between multiple pages. [Storybook](https://storybook.heroui.com/?path=/story/components-pagination--default)[@heroui/pagination](https://www.npmjs.com/package/@heroui/pagination)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/pagination)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/pagination.ts) HeroUI exports 3 pagination-related components: - Pagination: The main component to display a pagination. - PaginationItem: The internal component to display a pagination item. - PaginationCursor: The internal item component to display the current page. You can use the `variant` property to change the pagination items style. ### [With Controls](#with-controls) You can set the `showControls` to `true` to display the `next` and `previous` buttons. ### [Pagination Loop](#pagination-loop) In case you want to loop the pagination, you can set the `loop` property to `true`. The cursor will go back to the first page when it reaches the last page and vice versa. ### [Changing the initial page](#changing-the-initial-page) You can change the initial page by setting the `initialPage` property. ### [Compact Pagination](#compact-pagination) You can set the `isCompact` property to `true` to display reduced version of the pagination. ### [With Shadow](#with-shadow) You can use the `showShadow` property to display a shadow below the active page item. ### [Siblings](#siblings) You can control the number of pages to show before and after the current page by setting the `siblings` property. ### [Boundaries](#boundaries) You can control the number of pages to show at the beginning and end of the pagination by setting the `boundaries` property. ### [Custom items](#custom-items) You can use the `renderItem` property to customize the pagination items. - base: The main pagination slot. - wrapper: The pagination wrapper slot. This wraps the pagination items. - prev: The previous button slot. - next: The next button slot. - item: The pagination item slot, applied to the middle items. - cursor: The current page slot. Available only when `disableCursorAnimation` is `false` and `disableAnimation` is `false`. - forwardIcon: The forward icon slot. The one that appears when hovering the ellipsis button. - ellipsis: The ellipsis slot. - chevronNext: The chevron next icon slot. You can customize the `Pagination` component by passing custom Tailwind CSS classes to the component slots. In case you need to customize the pagination even further, you can use the `usePagination` hook to create your own implementation. `Pagination` has the following attributes on the `base` element: - data-controls: Indicates whether the pagination has controls. Based on `showControls` prop. - data-loop: When the pagination is looped. Based on `loop` prop. - data-dots-jump: Indicates whether the pagination has dots jump. Based on `dotsJump` prop. - data-total: The total number of pages. Based on `total` prop. - data-active-page: The active page. Based on `activePage` prop. - The root node has a role of `navigation` by default. - The pagination items have an aria-label that identifies the item purpose ("next page button", "previous page button", etc.), you can override this label by using the `getItemAriaLabel` function. - The pagination items are in tab order, with a tabindex of "0". ### [Pagination Props](#pagination-props) ` flat \| bordered \| light \| faded ` `dotsJump` `initialPage` `page` `siblings` `boundaries` `loop` `showControls` `disableCursorAnimation` `renderItem` ` PaginationItemProps ` `getItemAriaLabel` ` (page: string) => string ` ` Partial> ` ### [Pagination Events](#pagination-events) ` (page: number) => void ` #### [Pagination Item Props](#pagination-item-props) Number InputPopover [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/pagination.mdx) - [With Controls](#with-controls) - [Pagination Loop](#pagination-loop) - [Changing the initial page](#changing-the-initial-page) - [Compact Pagination](#compact-pagination) - [With Shadow](#with-shadow) - [Siblings](#siblings) - [Boundaries](#boundaries) - [Custom items](#custom-items) - [Pagination Props](#pagination-props) - [Pagination Events](#pagination-events) - [Pagination Item Props](#pagination-item-props) [Back to top](#pagination) ## Content from https://www.heroui.com/docs/components/popover Popover \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Popover Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something. [Storybook](https://storybook.heroui.com/?path=/story/components-popover--default)[@heroui/popover](https://www.npmjs.com/package/@heroui/popover)[React Aria](https://react-spectrum.adobe.com/react-aria/usePopover.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/popover)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/popover.ts) HeroUI exports 3 popover-related components: - Popover: The main component to display a popover. - PopoverTrigger: The component that triggers the popover. - PopoverContent: The component that contains the popover content. ### [With Arrow](#with-arrow) ### [Offset](#offset) ### [Title Props](#title-props) To be sure that the popover exposes the correct title to assistive technologies, you should use the `titleProps` prop on the `PopoverContent` component. To use this prop, you must pass a function as a child. The `Popover` handles the focus within the popover content. It means that you can use the popover with form elements without any problem. the focus returns to the trigger when the popover closes. > Note: You can add the `autoFocus` prop to the first `Input` component to focus it when the popover opens. The `Popover` component has a `backdrop` prop to show a backdrop behind the popover. The backdrop can be either `transparent`, `opaque` or `blur`. The default value is `transparent`. Popover offers a `motionProps` property to customize the `enter` / `exit` animation. - base: The main popover slot, it wraps the popover content and contains the arrow as a pseudo-element (::before). - trigger: The popover trigger slot, it has small styles to ensure the trigger works correctly. - backdrop: The backdrop slot, it contains the backdrop styles. - content: The content slot, it contains the popover content. You can customize the `Popover` component by passing custom Tailwind CSS classes to the component slots. `Popover` has the following attributes on the `PopoverContent` element: - data-open: When the popover is open. Based on popover state. - data-placement: The placement of the popover. Based on `placement` prop. The arrow element is positioned based on this attribute. - data-focus: When the popover is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the popover is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - The trigger and popover are automatically associated semantically via ARIA. - Content outside the popover is hidden from assistive technologies while it is open. - The popover closes when interacting outside, or pressing the Escape key. - Focus is moved into the popover on mount, and restored to the trigger element on unmount. - The popover is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window. - Scrolling is prevented outside the popover to avoid unintentionally repositioning or closing it. ### [Popover Props](#popover-props) `"transparent"` ` PopoverPlacement ` `"bottom"` `state` ` OverlayTriggerState ` `offset` `"7"` `containerPadding` `"12"` `crossOffset` `triggerType` ` dialog \| menu \| listbox \| tree \| grid ` `"dialog"` `showArrow` `shouldFlip` `triggerScaleOnOpen` `shouldCloseOnScroll` ` Partial> ` ### [Popover Events](#popover-events) ### [PopoverTrigger Props](#popovertrigger-props) ### [PopoverContent Props](#popovercontent-props) ### [Popover types](#popover-types) #### [Popover Placement](#popover-placement) PaginationProgress [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/popover.mdx) - [With Arrow](#with-arrow) - [Offset](#offset) - [Title Props](#title-props) - [Popover Props](#popover-props) - [Popover Events](#popover-events) - [PopoverTrigger Props](#popovertrigger-props) - [PopoverContent Props](#popovercontent-props) - [Popover types](#popover-types) - [Popover Placement](#popover-placement) [Back to top](#popover) ## Content from https://www.heroui.com/docs/components/progress Progress \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Progress The Progress component allows you to view the progress of any activity. [Storybook](https://storybook.heroui.com/?path=/story/components-progress--default)[@heroui/progress](https://www.npmjs.com/package/@heroui/progress)[React Aria](https://react-spectrum.adobe.com/react-aria/useProgressBar.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/progress)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/progress.ts) You can use the `isIndeterminate` prop to display an indeterminate progress bar. This is useful when you don't know how long an operation will take. ### [Striped](#striped) > Note: If you pass the `label` prop you don't need to pass `aria-label` prop anymore. - base: The base slot of the progress, it is the main container. - labelWrapper: The label and value label wrapper. - label: The label of the progress. - value: The value label of the progress. - track: The track is the background bar of the progress. - indicator: The indicator is the bar that is filled according to the `value`. You can customize the `Progress` component by passing custom Tailwind CSS classes to the component slots. ### [Progress Props](#progress-props) `isStriped` ` Partial> ` PopoverRadio Group [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/progress.mdx) - [Striped](#striped) - [Progress Props](#progress-props) [Back to top](#progress) ## Content from https://www.heroui.com/docs/components/radio-group Radio \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Radio group Radio Group allow users to select a single option from a list of mutually exclusive options. [Storybook](https://storybook.heroui.com/?path=/story/components-radiogroup--default)[@heroui/radio](https://www.npmjs.com/package/@heroui/radio)[React Aria](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/radio)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/radio.ts) ### [Default Value](#default-value) You can use the `value` and `onValueChange` properties to control the radio input value. > Note: HeroUI `Radio` also supports native events like `onChange`, useful for form libraries such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/). - RadioGroup Slots - base: Radio group root wrapper, it wraps the label and the wrapper. - wrapper: Radio group wrapper, it wraps all Radios. - label: Radio group label, it is placed before the wrapper. - description: Description slot for the radio group. - errorMessage: Error message slot for the radio group. - Radio Slots - base: Radio root wrapper, it wraps all elements. - wrapper: Radio wrapper, it wraps the control element. - hiddenInput: The hidden input element that is used to handle the radio state. - labelWrapper: Label and description wrapper. - label: Label slot for the radio. - control: Control element, it is the circle element. - description: Description slot for the radio. You can customize the `RadioGroup` and `Radio` component by passing custom Tailwind CSS classes to the component slots. In case you need to customize the radio group even further, you can use the `useRadio` hook to create your own implementation. - RadioGroup has the following attributes on the `base` element: - data-orientation: The orientation of the radio group. Based on `orientation` prop. - Radio has the following attributes on the `base` element: - data-selected: When the radio is checked. Based on `isSelected` prop. - data-pressed: When the radio is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html). - data-invalid: When the radio is invalid. Based on `validationState` prop. - data-readonly: When the radio is readonly. Based on `isReadOnly` prop. - data-hover-unselected: When the radio is being hovered and unchecked. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html). - data-hover: When the radio is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html). - data-focus: When the radio is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the radio is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-disabled: When the radio is disabled. Based on `isDisabled` prop. - Radio groups are exposed to assistive technology via ARIA. - Each radio is built with a native HTML `` element, which can be optionally visually hidden to allow custom styling. - Keyboard event support for arrows keys. - Group and radio labeling support for assistive technology. ### [RadioGroup Props](#radiogroup-props) ` horizontal \| vertical ` ### [RadioGroup Events](#radiogroup-events) ` ((value: string) => void) ` ### [Radio Props](#radio-props) ` Partial> ` ProgressRange Calendar [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/radio-group.mdx) - [Default Value](#default-value) - [RadioGroup Props](#radiogroup-props) - [RadioGroup Events](#radiogroup-events) - [Radio Props](#radio-props) [Back to top](#radio-group) ## Content from https://www.heroui.com/docs/components/range-calendar Range Calendar \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Range Calendar A range calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating through time. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date range. Once a start date is selected, the user can navigate to another date using the keyboard or by hovering over it, and clicking it or pressing the Enter key commits the selected date range. [Storybook](https://storybook.heroui.com/?path=/story/components-rangecalendar--default)[@heroui/calendar](https://www.npmjs.com/package/@heroui/calendar)[React Aria](https://react-spectrum.adobe.com/react-aria/useCalendar.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/calendar)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/calendar.ts) A RangeCalendar has no selection by default. An initial, uncontrolled value can be provided to the RangeCalendar using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop. ### [Non-Contiguous Ranges](#non-contiguous-ranges) The `allowsNonContiguousRanges` prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the onChange event will still be a single range with a start and end property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic. This example prevents selecting weekends, but allows selecting ranges that span multiple weeks. ### [RangeCalendar Props](#rangecalendar-props) ` RangeValue ` `"null"` ` narrow \| short \| long ` ### [RangeCalendar Events](#rangecalendar-events) ` (value: RangeValue \| null) => void ` Radio GroupScroll Shadow [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/range-calendar.mdx) - [Non-Contiguous Ranges](#non-contiguous-ranges) - [RangeCalendar Props](#rangecalendar-props) - [RangeCalendar Events](#rangecalendar-events) [Back to top](#range-calendar) ## Content from https://www.heroui.com/docs/components/scroll-shadow Scroll Shadow \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Scroll Shadow Applies top and bottom shadows when content overflows on scroll. [Storybook](https://storybook.heroui.com/?path=/story/components-scrollshadow--default)[@heroui/scroll-shadow](https://www.npmjs.com/package/@heroui/scroll-shadow)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/scroll-shadow)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/scroll-shadow.ts) ### [Hide Scrollbar](#hide-scrollbar) You can use the `hideScrollBar` property to hide vertical and horizontal scrollbars. ### [Custom Shadow Size](#custom-shadow-size) By default, the shadow size is `40` in pixels, but you can change it using the `size` property. ### [Horizontal Orientation](#horizontal-orientation) In case you need to apply the shadow on the horizontal scroll, you can set the `orientation` property to `horizontal`. ### [Shadow Offset](#shadow-offset) By default the shadow offset is `0` in pixels, but you can change it using the `offset` property. This allows you to apply the shadow on a specific position. ### [ScrollShadow Props](#scrollshadow-props) `"40"` `hideScrollBar` `isEnabled` `visibility` ` ScrollShadowVisibility ` ### [ScrollShadow Events](#scrollshadow-events) `onVisibilityChange` ` (visibility: ScrollShadowVisibility) => void ` #### [Scroll Shadow Visibility](#scroll-shadow-visibility) Range CalendarSelect [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/scroll-shadow.mdx) - [Hide Scrollbar](#hide-scrollbar) - [Custom Shadow Size](#custom-shadow-size) - [Horizontal Orientation](#horizontal-orientation) - [Shadow Offset](#shadow-offset) - [ScrollShadow Props](#scrollshadow-props) - [ScrollShadow Events](#scrollshadow-events) - [Scroll Shadow Visibility](#scroll-shadow-visibility) [Back to top](#scroll-shadow) ## Content from https://www.heroui.com/docs/components/select Select \| HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Select A select displays a collapsible list of options and allows a user to select one or more of them. [Storybook](https://storybook.heroui.com/?path=/story/components-select--default)[@heroui/select](https://www.npmjs.com/package/@heroui/select)[React Aria](https://react-spectrum.adobe.com/react-aria/useSelect.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/select)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/select.ts) HeroUI exports 3 select-related components: - Select: The main component, which is a wrapper for the other components. - SelectSection: The component that contains a group of select items. - SelectItem: The component that represents a select item. Select follows the [Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html), accepting both static and dynamic collections. You can use the `selectionMode="multiple"` property to allow multiple selection. If you pass the `isRequired` property to the select, it will have a `danger` asterisk at the end of the label and the select will be required. You can use the `startContent` and `endContent` properties to add content to the start and end of the select. Since the `Select` component uses the [Listbox](/docs/components/listbox) component under the hood, you can use the `startContent` and `endContent` properties of the `SelectItem` component to add content to the start and end of the select item. By default the select uses a `chevron-down` icon as the selector icon which rotates when the select is open. You can customize this icon by passing a custom one to the `selectorIcon` property. Select component uses the [ScrollShadow](/docs/components/scroll-shadow) under the hood to show a shadow when the select content is scrollable. You can disable this shadow by passing using the `scrollShadowProps` property. You can add a description to the select by passing the `description` property. You can combine the `isInvalid` and `errorMessage` properties to show an invalid select. You can use the `selectedKeys` and `onSelectionChange` / `onChange` properties to control the select value. Using `onSelectionChange`: Using `onChange`: ### [Controlling the open state](#controlling-the-open-state) You can control the open state of the select by using the `isOpen` and `onOpenChange` / `onClose` properties. You can customize the select items by modifying the `SelectItem` children. ### [Custom Render Value](#custom-render-value) By default the select will render the selected item's text value, but you can customize this by passing a `renderValue` function. The `renderValue` function receives the selected items as a parameter and must return a `ReactNode`. Check the [Render Value Function](#render-value-function) section for more details. Select supports asynchronous loading, in the example below we are using a custom hook to fetch the [Pokemon API](https://pokeapi.co/api/v2/pokemon) data in combination with the `useInfiniteScroll` hook to load more data when the user reaches the end of the list. Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`. You can use the `SelectSection` component to group select items. You can customize the sections style by using the `classNames` property of the `SelectSection` component. ### [Multiple Select Controlled](#multiple-select-controlled) You can use the same properties as the single select to control the multiple select, `selectedKeys` and `onSelectionChange` / `onChange`. ### [Multiple With Chips](#multiple-with-chips) You can render any component as the select value by using the `renderValue` property. In this example we are using the [Chip](/docs/components/chip) component to render the selected items. > Note: Make sure to pass the `isMultiline` property to the `Select` component to allow the chips to wrap. ### [Customizing the select](#customizing-the-select) You can customize any slot of the select by using the `classNames` property. Select component also provides the [popoverProps](/docs/components/popover#api) and [listboxProps](/docs/components/listbox#api) properties to customize the popover and listbox components. ### [Using `value` attribute in option](#using-value-attribute-in-option) The [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value) attribute is not directly supported in `SelectItem`. Instead, the `key` property should be used to set the `value` to be submitted in forms. If you need to submit a specific `value` instead of the `key` during form submission, consider implementing a lookup map in your application. - base: The main wrapper of the select. This wraps the rest of the slots. - label: The label of the select. - mainWrapper: Wraps the `helperWrapper` and the `trigger` slots. - trigger: The trigger of the select. This wraps the label the inner wrapper and the selector icon. - innerWrapper: The wrapper of the select content. This wraps the start/end content and the select value. - selectorIcon: The selector icon of the select. This is the icon that rotates when the select is open (`data-open`). - value: The select value. This is also the slot that wraps the `renderValue` function result. - listbox: The listbox component. This is the component that wraps the select items. - helperWrapper: The wrapper of the helper text. This wraps the helper text and the error message. - description: The description of the select. - errorMessage: The error message of the select. `Select` has the following attributes on the `base` element: - data-filled: Indicates if the select has a value, is focused, has start/end content or is open. - data-has-value: Indicates if the select has selected item(s). - data-has-label: Indicates if the select has a label. Based on `label` prop. - data-has-helper: Indicates if the select has helper text. Based on `errorMessage` or `description` prop. - data-invalid: Indicates if the select is invalid. Based on `isInvalid` prop. `Select` has the following attributes on the `trigger` element: - data-open: Indicates if the select is open. - data-disabled: When the select trigger is disabled. Based on select `isDisabled` prop. - data-focus: When the select trigger is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the select trigger is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-pressed: When the select trigger is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-hover: When the select trigger is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) `Select` has the following attributes on the `selectorIcon` element: `SelectItem` has the following attributes on the `base` element: - data-disabled: When the select item is disabled. Based on select `disabledKeys` prop. - data-selected: When the select item is selected. Based on select `selectedKeys` prop. - data-hover: When the select item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - data-pressed: When the select item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - data-focus: When the select item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - data-focus-visible: When the select item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Exposed to assistive technology as a button with a listbox popup using ARIA (combined with [Listbox](/docs/components/listbox)). - Support for selecting a single option. - Support for selecting multiple options. - Support for disabled options. - Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly. - Typeahead to allow selecting options by typing text, even without opening the listbox. - Browser autofill integration via a hidden native `

`). - **gridHeaderRow**: The date grid header row element (e.g. `

`). - **gridBody**: The date grid body element (e.g. `

` element or a custom element type. ### [Divider Props](#divider-props) `` `horizontal` | `vertical` `` ``"`horizontal`"`` Date Range PickerDropdown [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/divider.mdx) - [Divider Props](#divider-props) [Back to top](#divider) ## Content from https://www.heroui.com/docs/components/drawer Drawer | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Drawer Displays a panel that slides in from the edge of the screen, containing supplementary content. [Storybook](https://storybook.heroui.com/?path=/story/components-drawer--default)[@heroui/drawer](https://www.npmjs.com/package/@heroui/drawer)[React Aria](https://react-spectrum.adobe.com/react-aria/useModal.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/drawer)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/drawer.ts) HeroUI exports 5 drawer-related components: - **Drawer**: The main component to display a drawer. - **DrawerContent**: The wrapper of the other drawer components. - **DrawerHeader**: The header of the drawer. - **DrawerBody**: The body of the drawer. - **DrawerFooter**: The footer of the drawer. When the drawer opens: - Focus is bounded within the drawer and set to the first tabbable element. - Content behind a drawer is inert, meaning that users cannot interact with it. ### [Non-dismissible](#non-dismissible) By default, the drawer can be closed by clicking on the overlay or pressing the Esc key. You can disable this behavior by setting the following properties: - Set the `isDismissable` property to `false` to prevent the drawer from closing when clicking on the overlay. - Set the `isKeyboardDismissDisabled` property to `true` to prevent the drawer from closing when pressing the Esc key. ### [Drawer placement](#drawer-placement) The drawer can be placed on any edge of the screen using the `placement` prop: - `left` - `right` (default) - `top` - `bottom` ### [With Form](#with-form) The `Drawer` handles the focus within the drawer content. It means that you can use the drawer with form elements without any problem. The focus returns to the trigger when the drawer closes. > **Note**: You can add the `autoFocus` prop to the first `Input` component to focus it when the drawer opens. ### [Backdrop](#backdrop) The `Drawer` component has a `backdrop` prop to show a backdrop behind the drawer. The backdrop can be either `transparent`, `opaque` or `blur`. The default value is `opaque`. Drawer offers a `motionProps` property to customize the `enter` / `exit` animation. **Credits** The Drawer component design is inspired by [Luma](https://x.com/LumaHQ). - **wrapper**: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots. - **base**: The main slot of the drawer content. - **backdrop**: The backdrop slot, it is displayed behind the drawer. - **header**: The header of the drawer, it is displayed at the top of the drawer. - **body**: The body of the drawer, it is displayed in the middle of the drawer. - **footer**: The footer of the drawer, it is displayed at the bottom of the drawer. - **closeButton**: The close button of the drawer. `Drawer` has the following attributes on the `base` element: - **data-open**: When the drawer is open. Based on drawer state. - **data-dismissable**: When the drawer is dismissable. Based on `isDismissable` prop. - Content outside the drawer is hidden from assistive technologies while it is open. - The drawer optionally closes when interacting outside, or pressing the Esc key. - Focus is moved into the drawer on mount, and restored to the trigger element on unmount. - While open, focus is contained within the drawer, preventing the user from tabbing outside. - Scrolling the page behind the drawer is prevented while it is open, including in mobile browsers. ### [Drawer Props](#drawer-props) ` xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | full ` ` left | right | top | bottom ` `"right"` `isDismissable` `isKeyboardDismissDisabled` `shouldBlockScroll` `hideCloseButton` `closeButton` `portalContainer` ` HTMLElement ` `"document.body"` ` Partial> ` ### [Drawer Events](#drawer-events) ### [Drawer types](#drawer-types) DropdownForm [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/drawer.mdx) - [Non-dismissible](#non-dismissible) - [Drawer placement](#drawer-placement) - [With Form](#with-form) - [Backdrop](#backdrop) - [Drawer Props](#drawer-props) - [Drawer Events](#drawer-events) - [Drawer types](#drawer-types) [Back to top](#drawer) ## Content from https://www.heroui.com/docs/components/dropdown Dropdown | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Dropdown Displays a list of actions or options that a user can choose. [Storybook](https://storybook.heroui.com/?path=/story/components-dropdown--default)[@heroui/dropdown](https://www.npmjs.com/package/@heroui/dropdown)[React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/dropdown)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/dropdown.ts) HeroUI exports 5 dropdown-related components: - **Dropdown**: The main component, which is a wrapper for the other components. This component is an extension of the [Popover](/docs/components/popover) component, so it accepts all the props of the Popover component. - **DropdownTrigger**: The component that triggers the dropdown menu to open. - **DropdownMenu**: The component that contains the dropdown items. - **DropdownSection**: The component that contains a group of dropdown items. - **DropdownItem**: The component that represents a dropdown item. Dropdown follows the [Collection Components API](https://react-spectrum.adobe.com/react-stately/collections.html), accepting both static and dynamic collections. ### [Disabled Keys](#disabled-keys) Dropdown items can be disabled using the `disabledKeys` prop to the `DropdownMenu` component. > **Note**: It's important to have a unique key for each item, otherwise the disabled keys will not work. ### [Action event](#action-event) You can use the `onAction` prop to get the key of the selected item. You can use the `variant` in the `DropdownMenu` component to change the `hover` style of the dropdown items. ### [Single Selection](#single-selection) You can set the `selectionMode` property as `single` to allow the user to select only one item at a time. ### [Multiple Selection](#multiple-selection) You can set the `selectionMode` property as `multiple` to allow the user to select multiple items at a time. > **Note**: To allow empty selection, you can set the `disallowEmptySelection` property as `false`. ### [With Shortcut](#with-shortcut) You can use the `shortcut` prop to add a shortcut to the dropdown item. > **Note**: Dropdown does not handle the shortcut event, you need to handle it yourself. It is possible to add icons to the dropdown items using the `startContent` / `endContent` props. > **Note**: If you use `currentColor` as the icon color, the icon will have the same color as the item text. You can use the `description` prop to add a description to the dropdown item. You can use the `DropdownSection` component to group dropdown items. > **Note**: Sections without a `title` must provide an `aria-label` for accessibility. ### [Custom Trigger](#custom-trigger) You can use any component as a trigger for the dropdown menu, just wrap it in the `DropdownTrigger` component. ### [Changing the backdrop](#changing-the-backdrop) As we mentioned earlier, the `Dropdown` component is an extension of the [Popover](/docs/components/popover) component, so it accepts all the props of the Popover component, including the `backdrop` prop. The `` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). See the [Routing](/docs/guide/routing) guide to learn how to set this up. Dropdown has 3 components with slots the `DropdownMenu`, `DropdownItem` and `DropdownSection` components. ### [DropdownMenu](#dropdownmenu) - **base**: The main wrapper for the menu component. This slot wraps the `topContent`, `bottomContent` and the `list` slot. - **list**: The slot for the menu list component. You can see this slot as the `ul` slot. - **emptyContent**: The slot content to display when the collection is empty. ### [DropdownItem](#dropdownitem) - **base**: The main slot for the dropdown item. It wraps all the other slots. - **wrapper**: The `title` and `description` wrapper. - **title**: The title of the dropdown item. - **description**: The description of the dropdown item. - **shortcut**: The shortcut slot. - **selectedIcon**: The selected icon slot. This is only visible when the item is selected. ### [DropdownSection](#dropdownsection) - **base**: The main slot for the dropdown section. It wraps all the other slots. - **heading**: The title that is render on top of the section group. - **group**: The group of dropdown items. - **divider**: The divider that is render between the groups. This is only visible when `showDivider` is `true`. ### [Customizing the dropdown popover](#customizing-the-dropdown-popover) The `Dropdown` component is an extension of the [Popover](/docs/components/popover) component, so you can use the same slots to customize the dropdown. ### [Customizing the dropdown items style](#customizing-the-dropdown-items-style) You can customize the dropdown items either by using the `DropdownMenu` `itemClasses` prop or by using the `DropdownItem` slots, the `itemClasses` allows you to customize all the items at once, while the slots allow you to customize each item individually. ### [Keyboard Interactions](#keyboard-interactions) Key Description Space When focus is on `DropdownTrigger`, opens the dropdown menu and focuses the first item. When focus is on an item, activates the focused item. Enter ArrowDown When focus is on `DropdownTrigger`, opens the dropdown menu. When focus is on an item, moves focus to the next item. ArrowUp When focus is on an item, moves focus to the previous item. Esc Closes the dropdown menu and moves focus to `DropdownTrigger`. A-Z or a-z When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. `DropdownItem` has the following attributes on the `base` element: - **data-disabled**: When the dropdown item is disabled. Based on dropdown `disabledKeys` prop. - **data-selected**: When the dropdown item is selected. Based on dropdown `selectedKeys` prop. - **data-hover**: When the dropdown item is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) - **data-pressed**: When the dropdown item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) - **data-focus**: When the dropdown item is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - **data-focus-visible**: When the dropdown item is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html). - Exposed to assistive technology as a `button` with a `menu` using ARIA. - Support for single, multiple, or no selection. - Support for disabled items. - Support for sections. - Complex item labeling support for accessibility. - Keyboard navigation support including arrow keys, home/end, page up/down. See [Keyboard Interactions](#keyboard-interactions) for more details. - Automatic scrolling support during keyboard navigation. - Keyboard support for opening the menu using the arrow keys, including automatically focusing the first or last item accordingly. - Typeahead to allow focusing items by typing text. - Virtualized scrolling support for performance with long lists. ### [Dropdown Props](#dropdown-props) `type` ` menu | listbox ` `"menu"` `trigger` ` press | longPress ` `"press"` `closeOnSelect` `PopoverProps` ### [Dropdown Events](#dropdown-events) `shouldCloseOnInteractOutside` ` (e: HTMLElement) => void ` ### [DropdownTrigger Props](#dropdowntrigger-props) ### [DropdownMenu Props](#dropdownmenu-props) ` ReactNode | ((item: T) => ReactElement) ` ` solid | bordered | light | flat | faded | shadow ` ` all | Iterable ` ` Iterable ` ` boolean | first | last ` `emptyContent` `"No items."` `hideEmptyContent` `hideSelectedIcon` `shouldFocusWrap` ` Partial> ` ` Partial> ` ### [DropdownMenu Events](#dropdownmenu-events) ` (keys: "all" | Set & {anchorKey?: string; currentKey?: string}) => void ` ### [DropdownSection Props](#dropdownsection-props) ` Record<'base'｜'heading'｜'group'｜'divider', string>> ` ` Record<'base'｜'wrapper'｜'title'｜'description'｜'shortcut'｜'selectedIcon', string>> ` ### [DropdownItem Props](#dropdownitem-props) `key` ` string | ReactNode ` `textValue` `shortcut` `selectedIcon` ` SelectedIconProps ` `href` `target` ` HTMLAttributeAnchorTarget ` `rel` `download` ` boolean | string ` `ping` `referrerPolicy` ` HTMLAttributeReferrerPolicy ` ### [DropdownItem Events](#dropdownitem-events) #### [Dropdown Item Selected Icon Props](#dropdown-item-selected-icon-props) DividerDrawer [Edit this page on GitHub](https://github.com/heroui-inc/heroui/edit/main/apps/docs/content/docs/components/dropdown.mdx) - [Disabled Keys](#disabled-keys) - [Action event](#action-event) - [Single Selection](#single-selection) - [Multiple Selection](#multiple-selection) - [With Shortcut](#with-shortcut) - [Custom Trigger](#custom-trigger) - [Changing the backdrop](#changing-the-backdrop) - [DropdownMenu](#dropdownmenu) - [DropdownItem](#dropdownitem) - [DropdownSection](#dropdownsection) - [Customizing the dropdown popover](#customizing-the-dropdown-popover) - [Customizing the dropdown items style](#customizing-the-dropdown-items-style) - [Keyboard Interactions](#keyboard-interactions) - [Dropdown Props](#dropdown-props) - [Dropdown Events](#dropdown-events) - [DropdownTrigger Props](#dropdowntrigger-props) - [DropdownMenu Props](#dropdownmenu-props) - [DropdownMenu Events](#dropdownmenu-events) - [DropdownSection Props](#dropdownsection-props) - [DropdownItem Props](#dropdownitem-props) - [DropdownItem Events](#dropdownitem-events) - [Dropdown Item Selected Icon Props](#dropdown-item-selected-icon-props) [Back to top](#dropdown) ## Content from https://www.heroui.com/docs/components/form Form | HeroUI (Previously NextUI) - Beautiful, fast and modern React UI Library # Form A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors. [Storybook](https://storybook.heroui.com/?path=/story/components-form--default)[@heroui/form](https://www.npmjs.com/package/@heroui/form)[Source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/components/form)[Styles source](https://github.com/heroui-inc/heroui/tree/feat/v2/packages/core/theme/src/components/form.ts) ## [Anatomy](#anatomy) A `Form` is a container for input elements and submit/reset buttons, with support for validation messages. When labeled with `aria-label` or `aria-labelledby`, it becomes a navigable [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html) for assistive technology. ## [Events](#events) The `onSubmit` event will be triggered when a user submits the form with the `Enter` key or by pressing a submit button. The onReset event will be triggered when a user presses a reset button. ## [Validation](#validation) `Form` supports native HTML constraint validation with customizable UI, custom validation functions, and server-side validation. Server-side validation errors can be provided via the `validationErrors` prop as an object mapping field names to error messages, which are cleared when the user modifies the field. See the [Forms](/docs/guide/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries. ### [Validation Behavior](#validation-behavior) `Form` validation uses native validation behavior by default, but can be switched to ARIA validation by setting `validationBehavior="aria"`. ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level. To set the default behavior at the app level, you can change the form defaults for your entire app using [HeroUI Provider](/docs/api-references/heroui-provider). - Built with a native HTML `

Context Hub

HeroUI Documentation