@chakra-ui/core

  • Version 0.8.0
  • Published
  • 890 kB
  • 16 dependencies
  • MIT license

Install

npm i @chakra-ui/core
yarn add @chakra-ui/core
pnpm add @chakra-ui/core

Overview

Responsive and accessible React UI components built with React and Emotion

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable Accordion

const Accordion: React.FC<AccordionProps>;
  • The accordion component delivers large amounts of content in a small space through progressive disclosure.

    By default, only one item may be expanded and it can only be collapsed again by expanding another.

variable AccordionHeader

const AccordionHeader: React.FC<any>;
  • AccordionHeader component composes PseudoBox, this means you can use the _expanded, _disabled, _hover, etc. props to style them

variable AccordionIcon

const AccordionIcon: React.FC<IconProps>;

    variable AccordionItem

    const AccordionItem: React.FC<any>;
    • Accordions allow users to expand and collapse sections of content. It composes Box component.

    variable AccordionPanel

    const AccordionPanel: React.FC<any>;
    • AccordionPanel component composes Collapse to provide the height animation

    variable Alert

    const Alert: React.FC<any>;
    • Alerts are used to communicate a state that affects a system, feature or page

    variable AlertDescription

    const AlertDescription: React.FC<any>;

      variable AlertDialog

      const AlertDialog: React.FC<IAlertDialog>;

        variable AlertDialogBody

        const AlertDialogBody: React.FC<any>;

          variable AlertDialogCloseButton

          const AlertDialogCloseButton: React.FC<CloseButtonProps>;

            variable AlertDialogContent

            const AlertDialogContent: React.FC<any>;

              variable AlertDialogFooter

              const AlertDialogFooter: React.FC<any>;

                variable AlertDialogHeader

                const AlertDialogHeader: React.FC<any>;

                  variable AlertDialogOverlay

                  const AlertDialogOverlay: React.FC<any>;

                    variable AlertIcon

                    const AlertIcon: React.FC<IconProps>;

                      variable AlertTitle

                      const AlertTitle: React.FC<any>;

                        variable AspectRatioBox

                        const AspectRatioBox: React.FC<any>;

                          variable Avatar

                          const Avatar: React.FC<AvatarProps>;
                          • The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

                          variable AvatarBadge

                          const AvatarBadge: React.FC<any>;

                            variable AvatarGroup

                            const AvatarGroup: React.FC<AvatarGroupProps>;
                            • AvatarGroup is a wrapper to render a collection of evenly spaced avatars.

                            variable AvatarName

                            const AvatarName: React.FC<any>;

                              variable Badge

                              const Badge: React.FC<any>;
                              • The Badge component is used for state, general text, and number labels.

                              variable Box

                              const Box: React.FC<any>;
                                const Breadcrumb: React.FC<any>;
                                  const BreadcrumbItem: React.FC<any>;
                                    const BreadcrumbLink: React.FC<any>;
                                      const BreadcrumbSeparator: React.FC<any>;

                                        variable Button

                                        const Button: React.FC<ButtonProps>;

                                          variable ButtonGroup

                                          const ButtonGroup: React.FC<ButtonGroupProps>;

                                            variable Callout

                                            const Callout: React.FC<any>;
                                            • A react component used to alert users of a particular screen area that needs user action

                                            variable Checkbox

                                            const Checkbox: React.FC<any>;

                                              variable CheckboxGroup

                                              const CheckboxGroup: React.FC<CheckboxGroupProps>;

                                                variable CircularProgress

                                                const CircularProgress: React.FC<any>;

                                                  variable CircularProgressLabel

                                                  const CircularProgressLabel: React.FC<any>;

                                                    variable CloseButton

                                                    const CloseButton: React.FC<CloseButtonProps>;

                                                      variable Code

                                                      const Code: React.FC<any>;

                                                        variable Collapse

                                                        const Collapse: React.FC<any>;

                                                          variable ColorModeProvider

                                                          const ColorModeProvider: React.FC<IColorModeProvider>;

                                                            variable ControlBox

                                                            const ControlBox: Emotion.StyledComponent<any, {}, {}>;

                                                              variable CSSReset

                                                              const CSSReset: React.FC<CSSResetProps>;

                                                                variable DarkMode

                                                                const DarkMode: React.FC<IColorModeProvider>;

                                                                  variable Divider

                                                                  const Divider: React.FC<
                                                                  Omit<any, 'aria-orientation'> & { orientation?: BoxProps['aria-orientation'] }
                                                                  >;

                                                                    variable Drawer

                                                                    const Drawer: React.FC<IDrawer>;

                                                                      variable DrawerBody

                                                                      const DrawerBody: React.FC<any>;

                                                                        variable DrawerCloseButton

                                                                        const DrawerCloseButton: React.FC<CloseButtonProps>;

                                                                          variable DrawerContent

                                                                          const DrawerContent: React.FC<any>;

                                                                            variable DrawerFooter

                                                                            const DrawerFooter: React.FC<any>;

                                                                              variable DrawerHeader

                                                                              const DrawerHeader: React.FC<any>;

                                                                                variable DrawerOverlay

                                                                                const DrawerOverlay: React.FC<any>;

                                                                                  variable Editable

                                                                                  const Editable: React.FC<EditableProps>;

                                                                                    variable EditableInput

                                                                                    const EditableInput: React.FC<any>;

                                                                                      variable EditablePreview

                                                                                      const EditablePreview: React.FC<any>;

                                                                                        variable Flex

                                                                                        const Flex: React.FC<any>;

                                                                                          variable FormControl

                                                                                          const FormControl: React.FC<any>;
                                                                                          • FormControl provides context such as isInvalid, isRequired, isDisabled to it's children.

                                                                                          variable FormErrorMessage

                                                                                          const FormErrorMessage: React.FC<any>;

                                                                                            variable FormHelperText

                                                                                            const FormHelperText: React.FC<any>;

                                                                                              variable FormLabel

                                                                                              const FormLabel: React.FC<any>;
                                                                                              • FormLabel is used for form inputs and controls. It reads from the FormControl context to handle it's styles for the various form states.

                                                                                              variable Grid

                                                                                              const Grid: React.FC<any>;

                                                                                                variable Heading

                                                                                                const Heading: React.FC<HeadingProps>;

                                                                                                  variable Icon

                                                                                                  const Icon: React.FC<IconProps>;

                                                                                                    variable IconButton

                                                                                                    const IconButton: React.FC<IconButtonProps>;

                                                                                                      variable Image

                                                                                                      const Image: React.FC<any>;

                                                                                                        variable Input

                                                                                                        const Input: React.FC<any>;

                                                                                                          variable InputAddon

                                                                                                          const InputAddon: React.FC<any>;

                                                                                                            variable InputGroup

                                                                                                            const InputGroup: React.FC<any>;

                                                                                                              variable InputLeftAddon

                                                                                                              const InputLeftAddon: React.FC<any>;

                                                                                                                variable InputLeftElement

                                                                                                                const InputLeftElement: React.FC<Omit<any, 'placement'>>;

                                                                                                                  variable InputRightAddon

                                                                                                                  const InputRightAddon: React.FC<any>;

                                                                                                                    variable InputRightElement

                                                                                                                    const InputRightElement: React.FC<Omit<any, 'placement'>>;

                                                                                                                      variable Kbd

                                                                                                                      const Kbd: React.FC<any>;

                                                                                                                        variable LightMode

                                                                                                                        const LightMode: React.FC<IColorModeProvider>;
                                                                                                                          const Link: React.FC<any>;
                                                                                                                          • Links are accesible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.

                                                                                                                          variable List

                                                                                                                          const List: React.FC<any>;

                                                                                                                            variable ListIcon

                                                                                                                            const ListIcon: React.FC<ListIconProps>;

                                                                                                                              variable ListItem

                                                                                                                              const ListItem: React.FC<any>;
                                                                                                                                const Menu: React.FC<MenuProps>;
                                                                                                                                  const MenuButton: React.FC<any>;
                                                                                                                                    const MenuDivider: React.FC<any>;
                                                                                                                                      const MenuGroup: React.FC<any>;
                                                                                                                                        const MenuItem: React.FC<any>;
                                                                                                                                          const MenuItemOption: React.FC<any>;
                                                                                                                                            const MenuList: React.FC<any>;
                                                                                                                                              const MenuOptionGroup: React.FC<any>;
                                                                                                                                                const Modal: React.FC<IModal>;

                                                                                                                                                  variable ModalBody

                                                                                                                                                  const ModalBody: React.FC<any>;

                                                                                                                                                    variable ModalCloseButton

                                                                                                                                                    const ModalCloseButton: React.FC<CloseButtonProps>;

                                                                                                                                                      variable ModalContent

                                                                                                                                                      const ModalContent: React.FC<any>;

                                                                                                                                                        variable ModalFooter

                                                                                                                                                        const ModalFooter: React.FC<any>;

                                                                                                                                                          variable ModalHeader

                                                                                                                                                          const ModalHeader: React.FC<any>;

                                                                                                                                                            variable ModalOverlay

                                                                                                                                                            const ModalOverlay: React.FC<any>;

                                                                                                                                                              variable NumberDecrementStepper

                                                                                                                                                              const NumberDecrementStepper: React.FC<any>;

                                                                                                                                                                variable NumberIncrementStepper

                                                                                                                                                                const NumberIncrementStepper: React.FC<any>;

                                                                                                                                                                  variable NumberInput

                                                                                                                                                                  const NumberInput: React.FC<any>;

                                                                                                                                                                    variable NumberInputField

                                                                                                                                                                    const NumberInputField: React.FC<any>;

                                                                                                                                                                      variable NumberInputStepper

                                                                                                                                                                      const NumberInputStepper: React.FC<any>;

                                                                                                                                                                        variable Popover

                                                                                                                                                                        const Popover: React.FC<PopoverProps>;

                                                                                                                                                                          variable PopoverArrow

                                                                                                                                                                          const PopoverArrow: React.FC<any>;

                                                                                                                                                                            variable PopoverBody

                                                                                                                                                                            const PopoverBody: React.FC<any>;

                                                                                                                                                                              variable PopoverCloseButton

                                                                                                                                                                              const PopoverCloseButton: React.FC<any>;

                                                                                                                                                                                variable PopoverContent

                                                                                                                                                                                const PopoverContent: React.FC<any>;

                                                                                                                                                                                  variable PopoverContext

                                                                                                                                                                                  const PopoverContext: React.Context<{}>;

                                                                                                                                                                                    variable PopoverFooter

                                                                                                                                                                                    const PopoverFooter: React.FC<any>;

                                                                                                                                                                                      variable PopoverHeader

                                                                                                                                                                                      const PopoverHeader: React.FC<any>;

                                                                                                                                                                                        variable PopoverTrigger

                                                                                                                                                                                        const PopoverTrigger: React.FC<IPopoverTrigger>;

                                                                                                                                                                                          variable Portal

                                                                                                                                                                                          const Portal: React.FC<PortalProps>;

                                                                                                                                                                                            variable Progress

                                                                                                                                                                                            const Progress: React.FC<any>;

                                                                                                                                                                                              variable PseudoBox

                                                                                                                                                                                              const PseudoBox: React.FC<any>;
                                                                                                                                                                                              • PseudoBox is an interactive wrapper that composes Box and converts common CSS pseudo-selectors to props for ease of styling.

                                                                                                                                                                                                For example, to style :hover use _hover

                                                                                                                                                                                                Example 1

                                                                                                                                                                                                <PseudoBox _hover={...} _focus={...}/>

                                                                                                                                                                                              variable Radio

                                                                                                                                                                                              const Radio: React.FC<any>;

                                                                                                                                                                                                variable RadioButtonGroup

                                                                                                                                                                                                const RadioButtonGroup: React.FC<RadioButtonGroupProps>;

                                                                                                                                                                                                  variable RadioGroup

                                                                                                                                                                                                  const RadioGroup: React.FC<RadioGroupProps>;

                                                                                                                                                                                                    variable Scale

                                                                                                                                                                                                    const Scale: React.FC<any>;

                                                                                                                                                                                                      variable Select

                                                                                                                                                                                                      const Select: React.FC<any>;

                                                                                                                                                                                                        variable SimpleGrid

                                                                                                                                                                                                        const SimpleGrid: React.FC<any>;

                                                                                                                                                                                                          variable Skeleton

                                                                                                                                                                                                          const Skeleton: React.FC<any>;

                                                                                                                                                                                                            variable Slide

                                                                                                                                                                                                            const Slide: React.FC<any>;

                                                                                                                                                                                                              variable SlideIn

                                                                                                                                                                                                              const SlideIn: React.FC<any>;

                                                                                                                                                                                                                variable Slider

                                                                                                                                                                                                                const Slider: React.FC<SliderProps>;

                                                                                                                                                                                                                  variable SliderFilledTrack

                                                                                                                                                                                                                  const SliderFilledTrack: React.FC<any>;

                                                                                                                                                                                                                    variable SliderThumb

                                                                                                                                                                                                                    const SliderThumb: React.FC<any>;

                                                                                                                                                                                                                      variable SliderTrack

                                                                                                                                                                                                                      const SliderTrack: React.FC<any>;

                                                                                                                                                                                                                        variable Spinner

                                                                                                                                                                                                                        const Spinner: React.FC<SpinnerProps>;
                                                                                                                                                                                                                        • Spinner is used for indicating a loading state of a component or page.

                                                                                                                                                                                                                          RECOMMENDED: Add aria-busy="true" to the component that triggered the loading state while the spinner is shown.

                                                                                                                                                                                                                        variable Stack

                                                                                                                                                                                                                        const Stack: React.FC<any>;

                                                                                                                                                                                                                          variable Stat

                                                                                                                                                                                                                          const Stat: React.FC<any>;

                                                                                                                                                                                                                            variable StatArrow

                                                                                                                                                                                                                            const StatArrow: React.FC<StatArrowProps>;

                                                                                                                                                                                                                              variable StatGroup

                                                                                                                                                                                                                              const StatGroup: React.FC<any>;

                                                                                                                                                                                                                                variable StatHelpText

                                                                                                                                                                                                                                const StatHelpText: React.FC<any>;

                                                                                                                                                                                                                                  variable StatLabel

                                                                                                                                                                                                                                  const StatLabel: React.FC<any>;

                                                                                                                                                                                                                                    variable StatNumber

                                                                                                                                                                                                                                    const StatNumber: React.FC<any>;

                                                                                                                                                                                                                                      variable Switch

                                                                                                                                                                                                                                      const Switch: React.FC<SwitchProps>;

                                                                                                                                                                                                                                        variable Tab

                                                                                                                                                                                                                                        const Tab: React.FC<any>;

                                                                                                                                                                                                                                          variable TabList

                                                                                                                                                                                                                                          const TabList: React.FC<any>;

                                                                                                                                                                                                                                            variable TabPanel

                                                                                                                                                                                                                                            const TabPanel: React.FC<any>;

                                                                                                                                                                                                                                              variable TabPanels

                                                                                                                                                                                                                                              const TabPanels: React.FC<any>;

                                                                                                                                                                                                                                                variable Tabs

                                                                                                                                                                                                                                                const Tabs: React.FC<TabsProps>;

                                                                                                                                                                                                                                                  variable Tag

                                                                                                                                                                                                                                                  const Tag: React.FC<TagProps>;

                                                                                                                                                                                                                                                    variable TagCloseButton

                                                                                                                                                                                                                                                    const TagCloseButton: any;

                                                                                                                                                                                                                                                      variable TagIcon

                                                                                                                                                                                                                                                      const TagIcon: React.FC<TagIconProps>;

                                                                                                                                                                                                                                                        variable TagLabel

                                                                                                                                                                                                                                                        const TagLabel: React.FC<any>;

                                                                                                                                                                                                                                                          variable Text

                                                                                                                                                                                                                                                          const Text: React.FC<any>;

                                                                                                                                                                                                                                                            variable Textarea

                                                                                                                                                                                                                                                            const Textarea: React.FC<any>;

                                                                                                                                                                                                                                                              variable theme

                                                                                                                                                                                                                                                              const theme: DefaultTheme;

                                                                                                                                                                                                                                                                variable ThemeProvider

                                                                                                                                                                                                                                                                const ThemeProvider: React.FC<{ theme?: ITheme }>;

                                                                                                                                                                                                                                                                  variable Tooltip

                                                                                                                                                                                                                                                                  const Tooltip: React.FC<any>;

                                                                                                                                                                                                                                                                    variable VisuallyHidden

                                                                                                                                                                                                                                                                    const VisuallyHidden: React.FC<any>;

                                                                                                                                                                                                                                                                      Functions

                                                                                                                                                                                                                                                                      function css

                                                                                                                                                                                                                                                                      css: (styleProps: object) => Function;

                                                                                                                                                                                                                                                                        function useClipboard

                                                                                                                                                                                                                                                                        useClipboard: <T>(value: T) => IClipboard<T>;
                                                                                                                                                                                                                                                                        • useClipboard is a custom hook to handle copying content to clipboard

                                                                                                                                                                                                                                                                        function useColorMode

                                                                                                                                                                                                                                                                        useColorMode: () => IUseColorMode;

                                                                                                                                                                                                                                                                          function useDisclosure

                                                                                                                                                                                                                                                                          useDisclosure: (defaultIsOpen?: boolean) => UseDisclosureReturn;
                                                                                                                                                                                                                                                                          • useDisclosure is a custom hook to help handle common open, close, or toggle scenarios

                                                                                                                                                                                                                                                                            Returns

                                                                                                                                                                                                                                                                            An object of isOpen, onOpen, onClose, onToggle

                                                                                                                                                                                                                                                                          function useFormControl

                                                                                                                                                                                                                                                                          useFormControl: (props: UseFormControlProps) => UseFormControlProps;
                                                                                                                                                                                                                                                                          • React hook to read from props passed to the FormControl component It's mostly used to design custom form control components.

                                                                                                                                                                                                                                                                            Parameter props

                                                                                                                                                                                                                                                                            props passed to the input control

                                                                                                                                                                                                                                                                          function useNumberInput

                                                                                                                                                                                                                                                                          useNumberInput: (props: UseNumberInputProps) => UseNumberInputReturn;

                                                                                                                                                                                                                                                                            function usePopoverContext

                                                                                                                                                                                                                                                                            usePopoverContext: () => PopoverContextValue | undefined;

                                                                                                                                                                                                                                                                              function usePrevious

                                                                                                                                                                                                                                                                              usePrevious: <T>(value: T) => T;

                                                                                                                                                                                                                                                                                function useTheme

                                                                                                                                                                                                                                                                                useTheme: () => ITheme;

                                                                                                                                                                                                                                                                                  function useToast

                                                                                                                                                                                                                                                                                  useToast: () => (props: useToastOptions) => void;

                                                                                                                                                                                                                                                                                    Interfaces

                                                                                                                                                                                                                                                                                    interface ColorHues

                                                                                                                                                                                                                                                                                    interface ColorHues {}

                                                                                                                                                                                                                                                                                      property 100

                                                                                                                                                                                                                                                                                      100: string;

                                                                                                                                                                                                                                                                                        property 200

                                                                                                                                                                                                                                                                                        200: string;

                                                                                                                                                                                                                                                                                          property 300

                                                                                                                                                                                                                                                                                          300: string;

                                                                                                                                                                                                                                                                                            property 400

                                                                                                                                                                                                                                                                                            400: string;

                                                                                                                                                                                                                                                                                              property 50

                                                                                                                                                                                                                                                                                              50: string;

                                                                                                                                                                                                                                                                                                property 500

                                                                                                                                                                                                                                                                                                500: string;

                                                                                                                                                                                                                                                                                                  property 600

                                                                                                                                                                                                                                                                                                  600: string;

                                                                                                                                                                                                                                                                                                    property 700

                                                                                                                                                                                                                                                                                                    700: string;

                                                                                                                                                                                                                                                                                                      property 800

                                                                                                                                                                                                                                                                                                      800: string;

                                                                                                                                                                                                                                                                                                        property 900

                                                                                                                                                                                                                                                                                                        900: string;

                                                                                                                                                                                                                                                                                                          interface CustomTheme

                                                                                                                                                                                                                                                                                                          interface CustomTheme extends SS.Theme {}

                                                                                                                                                                                                                                                                                                            property icons

                                                                                                                                                                                                                                                                                                            icons: IconsType;

                                                                                                                                                                                                                                                                                                              interface DefaultTheme

                                                                                                                                                                                                                                                                                                              interface DefaultTheme extends Typography {}

                                                                                                                                                                                                                                                                                                                property borders

                                                                                                                                                                                                                                                                                                                borders: Borders;

                                                                                                                                                                                                                                                                                                                  property breakpoints

                                                                                                                                                                                                                                                                                                                  breakpoints: Breakpoints;

                                                                                                                                                                                                                                                                                                                    property colors

                                                                                                                                                                                                                                                                                                                    colors: Colors;

                                                                                                                                                                                                                                                                                                                      property icons

                                                                                                                                                                                                                                                                                                                      icons: Record<string, Icon>;

                                                                                                                                                                                                                                                                                                                        property opacity

                                                                                                                                                                                                                                                                                                                        opacity: Opacity;

                                                                                                                                                                                                                                                                                                                          property radii

                                                                                                                                                                                                                                                                                                                          radii: Radii;

                                                                                                                                                                                                                                                                                                                            property shadows

                                                                                                                                                                                                                                                                                                                            shadows: Shadows;

                                                                                                                                                                                                                                                                                                                              property sizes

                                                                                                                                                                                                                                                                                                                              sizes: Sizes;

                                                                                                                                                                                                                                                                                                                                property space

                                                                                                                                                                                                                                                                                                                                space: BaseSizes;

                                                                                                                                                                                                                                                                                                                                  property zIndices

                                                                                                                                                                                                                                                                                                                                  zIndices: ZIndices;

                                                                                                                                                                                                                                                                                                                                    interface IAccordion

                                                                                                                                                                                                                                                                                                                                    interface IAccordion {}

                                                                                                                                                                                                                                                                                                                                      property allowMultiple

                                                                                                                                                                                                                                                                                                                                      allowMultiple?: boolean;
                                                                                                                                                                                                                                                                                                                                      • If true, multiple accordion items can be expanded at once.

                                                                                                                                                                                                                                                                                                                                      property allowToggle

                                                                                                                                                                                                                                                                                                                                      allowToggle?: boolean;
                                                                                                                                                                                                                                                                                                                                      • If true, any expanded accordion item can be collapsed again.

                                                                                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                                                                                      children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                      • The content of the accordion. Must be AccordionItem

                                                                                                                                                                                                                                                                                                                                      property defaultIndex

                                                                                                                                                                                                                                                                                                                                      defaultIndex?: number | number[];
                                                                                                                                                                                                                                                                                                                                      • The initial index(es) of the expanded accordion item

                                                                                                                                                                                                                                                                                                                                      property index

                                                                                                                                                                                                                                                                                                                                      index?: number | number[];
                                                                                                                                                                                                                                                                                                                                      • The index(es) of the expanded accordion item

                                                                                                                                                                                                                                                                                                                                      property onChange

                                                                                                                                                                                                                                                                                                                                      onChange?: (expandedIndex?: number | number[]) => void;
                                                                                                                                                                                                                                                                                                                                      • The callback invoked when accordion items are expanded or collapsed.

                                                                                                                                                                                                                                                                                                                                      interface IAccordionItem

                                                                                                                                                                                                                                                                                                                                      interface IAccordionItem {}

                                                                                                                                                                                                                                                                                                                                        property defaultIsOpen

                                                                                                                                                                                                                                                                                                                                        defaultIsOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                        • If true, expands the accordion by on initial mount.

                                                                                                                                                                                                                                                                                                                                        property id

                                                                                                                                                                                                                                                                                                                                        id?: string;
                                                                                                                                                                                                                                                                                                                                        • A unique id for the accordion item.

                                                                                                                                                                                                                                                                                                                                        property isDisabled

                                                                                                                                                                                                                                                                                                                                        isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                        • If true, the accordion header will be disabled.

                                                                                                                                                                                                                                                                                                                                        property isOpen

                                                                                                                                                                                                                                                                                                                                        isOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                        • If true, expands the accordion in the controlled mode.

                                                                                                                                                                                                                                                                                                                                        property onChange

                                                                                                                                                                                                                                                                                                                                        onChange?: (isOpen: boolean) => void;
                                                                                                                                                                                                                                                                                                                                        • The callback fired when the accordion is expanded/collapsed.

                                                                                                                                                                                                                                                                                                                                        interface IAccordionItemRenderProps

                                                                                                                                                                                                                                                                                                                                        interface IAccordionItemRenderProps {}

                                                                                                                                                                                                                                                                                                                                          property isDisabled

                                                                                                                                                                                                                                                                                                                                          isDisabled?: boolean;

                                                                                                                                                                                                                                                                                                                                            property isExpanded

                                                                                                                                                                                                                                                                                                                                            isExpanded?: boolean;

                                                                                                                                                                                                                                                                                                                                              interface IAlert

                                                                                                                                                                                                                                                                                                                                              interface IAlert {}

                                                                                                                                                                                                                                                                                                                                                property status

                                                                                                                                                                                                                                                                                                                                                status?: 'error' | 'success' | 'warning' | 'info';
                                                                                                                                                                                                                                                                                                                                                • The status of the alert

                                                                                                                                                                                                                                                                                                                                                property variant

                                                                                                                                                                                                                                                                                                                                                variant?: 'subtle' | 'solid' | 'left-accent' | 'top-accent';
                                                                                                                                                                                                                                                                                                                                                • The variant of the alert style to use.

                                                                                                                                                                                                                                                                                                                                                interface IAlertDialog

                                                                                                                                                                                                                                                                                                                                                interface IAlertDialog extends Omit<IModal, 'initialFocusRef'> {}

                                                                                                                                                                                                                                                                                                                                                  property leastDestructiveRef

                                                                                                                                                                                                                                                                                                                                                  leastDestructiveRef: React.RefObject<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                    interface IAvatar

                                                                                                                                                                                                                                                                                                                                                    interface IAvatar {}

                                                                                                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                                                                                                      children?: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                      • The badge at the bottom right corner of the avatar.

                                                                                                                                                                                                                                                                                                                                                      property name

                                                                                                                                                                                                                                                                                                                                                      name?: string;
                                                                                                                                                                                                                                                                                                                                                      • The name of the person in the avatar.

                                                                                                                                                                                                                                                                                                                                                        - if src has loaded, the name will be used as the alt attribute of the img - If src is not loaded, the name will be used to create the initials

                                                                                                                                                                                                                                                                                                                                                      property showBorder

                                                                                                                                                                                                                                                                                                                                                      showBorder?: boolean;
                                                                                                                                                                                                                                                                                                                                                      • If true, the Avatar will show a border around it.

                                                                                                                                                                                                                                                                                                                                                        Best for a group of avatars

                                                                                                                                                                                                                                                                                                                                                      property size

                                                                                                                                                                                                                                                                                                                                                      size?: Size;
                                                                                                                                                                                                                                                                                                                                                      • The size of the avatar.

                                                                                                                                                                                                                                                                                                                                                      property src

                                                                                                                                                                                                                                                                                                                                                      src?: string;
                                                                                                                                                                                                                                                                                                                                                      • The image url of the Avatar

                                                                                                                                                                                                                                                                                                                                                      interface IBadge

                                                                                                                                                                                                                                                                                                                                                      interface IBadge {}

                                                                                                                                                                                                                                                                                                                                                        property variant

                                                                                                                                                                                                                                                                                                                                                        variant?: 'solid' | 'subtle' | 'outline';
                                                                                                                                                                                                                                                                                                                                                        • The variant of the badge

                                                                                                                                                                                                                                                                                                                                                        property variantColor

                                                                                                                                                                                                                                                                                                                                                        variantColor?: string;
                                                                                                                                                                                                                                                                                                                                                        • The color scheme of the badge

                                                                                                                                                                                                                                                                                                                                                          🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                          See Also

                                                                                                                                                                                                                                                                                                                                                          • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                        interface IButton

                                                                                                                                                                                                                                                                                                                                                        interface IButton {}

                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                          • The content of the button.

                                                                                                                                                                                                                                                                                                                                                          property iconSpacing

                                                                                                                                                                                                                                                                                                                                                          iconSpacing?: PseudoBoxProps['margin'];
                                                                                                                                                                                                                                                                                                                                                          • The space between the button icon and label. Use the styled-system tokens or add custom values as a string

                                                                                                                                                                                                                                                                                                                                                          property isActive

                                                                                                                                                                                                                                                                                                                                                          isActive?: boolean;
                                                                                                                                                                                                                                                                                                                                                          • If true, the button will be styled in it's active state.

                                                                                                                                                                                                                                                                                                                                                          property isDisabled

                                                                                                                                                                                                                                                                                                                                                          isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                          • If true, the button will be disabled.

                                                                                                                                                                                                                                                                                                                                                          property isFullWidth

                                                                                                                                                                                                                                                                                                                                                          isFullWidth?: boolean;
                                                                                                                                                                                                                                                                                                                                                          • If true, the button will take up the full width of its container.

                                                                                                                                                                                                                                                                                                                                                          property isLoading

                                                                                                                                                                                                                                                                                                                                                          isLoading?: boolean;
                                                                                                                                                                                                                                                                                                                                                          • If true, the button will show a spinner.

                                                                                                                                                                                                                                                                                                                                                          property leftIcon

                                                                                                                                                                                                                                                                                                                                                          leftIcon?: Icons | React.ComponentType;
                                                                                                                                                                                                                                                                                                                                                          • If added, the button will show an icon before the button's label. Use the icon key in theme.iconPath

                                                                                                                                                                                                                                                                                                                                                          property loadingText

                                                                                                                                                                                                                                                                                                                                                          loadingText?: string;
                                                                                                                                                                                                                                                                                                                                                          • The label to show in the button when isLoading is true If no text is passed, it only shows the spinner

                                                                                                                                                                                                                                                                                                                                                          property rightIcon

                                                                                                                                                                                                                                                                                                                                                          rightIcon?: Icons | React.ComponentType;
                                                                                                                                                                                                                                                                                                                                                          • If added, the button will show an icon after the button's label. Use the icon key in theme.iconPath

                                                                                                                                                                                                                                                                                                                                                          property size

                                                                                                                                                                                                                                                                                                                                                          size?: 'xs' | 'sm' | 'md' | 'lg';
                                                                                                                                                                                                                                                                                                                                                          • The size of the button

                                                                                                                                                                                                                                                                                                                                                          property type

                                                                                                                                                                                                                                                                                                                                                          type?: 'button' | 'reset' | 'submit';
                                                                                                                                                                                                                                                                                                                                                          • The html button type to use.

                                                                                                                                                                                                                                                                                                                                                          property variant

                                                                                                                                                                                                                                                                                                                                                          variant?: 'outline' | 'ghost' | 'unstyled' | 'link' | 'solid';
                                                                                                                                                                                                                                                                                                                                                          • The variant of the button style to use.

                                                                                                                                                                                                                                                                                                                                                          property variantColor

                                                                                                                                                                                                                                                                                                                                                          variantColor?: string;
                                                                                                                                                                                                                                                                                                                                                          • The color scheme of the button.

                                                                                                                                                                                                                                                                                                                                                            🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                            See Also

                                                                                                                                                                                                                                                                                                                                                            • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                          interface IButtonGroup

                                                                                                                                                                                                                                                                                                                                                          interface IButtonGroup {}

                                                                                                                                                                                                                                                                                                                                                            property children

                                                                                                                                                                                                                                                                                                                                                            children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                              property color

                                                                                                                                                                                                                                                                                                                                                              color?: string;

                                                                                                                                                                                                                                                                                                                                                                property isAttached

                                                                                                                                                                                                                                                                                                                                                                isAttached?: boolean;
                                                                                                                                                                                                                                                                                                                                                                • If true, the borderRadius of button that are direct children will be altered to look flushed together

                                                                                                                                                                                                                                                                                                                                                                property size

                                                                                                                                                                                                                                                                                                                                                                size?: IButton['size'];

                                                                                                                                                                                                                                                                                                                                                                  property spacing

                                                                                                                                                                                                                                                                                                                                                                  spacing?: StyledSystem.MarginRightProps['marginRight'];

                                                                                                                                                                                                                                                                                                                                                                    property variant

                                                                                                                                                                                                                                                                                                                                                                    variant?: IButton['variant'];

                                                                                                                                                                                                                                                                                                                                                                      interface ICheckbox

                                                                                                                                                                                                                                                                                                                                                                      interface ICheckbox {}

                                                                                                                                                                                                                                                                                                                                                                        property children

                                                                                                                                                                                                                                                                                                                                                                        children?: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                        • The children is the label to be displayed to the right of the checkbox.

                                                                                                                                                                                                                                                                                                                                                                        property defaultIsChecked

                                                                                                                                                                                                                                                                                                                                                                        defaultIsChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox will be initially checked.

                                                                                                                                                                                                                                                                                                                                                                        property id

                                                                                                                                                                                                                                                                                                                                                                        id?: string;
                                                                                                                                                                                                                                                                                                                                                                        • id assigned to input

                                                                                                                                                                                                                                                                                                                                                                        property isChecked

                                                                                                                                                                                                                                                                                                                                                                        isChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled)

                                                                                                                                                                                                                                                                                                                                                                        property isDisabled

                                                                                                                                                                                                                                                                                                                                                                        isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox will be disabled

                                                                                                                                                                                                                                                                                                                                                                        property isFullWidth

                                                                                                                                                                                                                                                                                                                                                                        isFullWidth?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox should take up the full width of the parent.

                                                                                                                                                                                                                                                                                                                                                                        property isIndeterminate

                                                                                                                                                                                                                                                                                                                                                                        isIndeterminate?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.

                                                                                                                                                                                                                                                                                                                                                                        property isInvalid

                                                                                                                                                                                                                                                                                                                                                                        isInvalid?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox is marked as invalid. Changes style of unchecked state.

                                                                                                                                                                                                                                                                                                                                                                        property isReadOnly

                                                                                                                                                                                                                                                                                                                                                                        isReadOnly?: boolean;
                                                                                                                                                                                                                                                                                                                                                                        • If true, the checkbox will be readonly

                                                                                                                                                                                                                                                                                                                                                                        property name

                                                                                                                                                                                                                                                                                                                                                                        name?: string;
                                                                                                                                                                                                                                                                                                                                                                        • The name of the input field in a checkbox (Useful for form submission).

                                                                                                                                                                                                                                                                                                                                                                        property onChange

                                                                                                                                                                                                                                                                                                                                                                        onChange?: React.ChangeEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                                                                                                                                        • The callback invoked when the checked state of the Checkbox changes..

                                                                                                                                                                                                                                                                                                                                                                        property size

                                                                                                                                                                                                                                                                                                                                                                        size?: 'sm' | 'md' | 'lg';
                                                                                                                                                                                                                                                                                                                                                                        • The size (width and height) of the checkbox

                                                                                                                                                                                                                                                                                                                                                                        property value

                                                                                                                                                                                                                                                                                                                                                                        value?: string | number;
                                                                                                                                                                                                                                                                                                                                                                        • The value to be used in the checkbox input. This is the value that will be returned on form submission.

                                                                                                                                                                                                                                                                                                                                                                        property variantColor

                                                                                                                                                                                                                                                                                                                                                                        variantColor?: string;
                                                                                                                                                                                                                                                                                                                                                                        • The color scheme of the checkbox.

                                                                                                                                                                                                                                                                                                                                                                          🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                                          See Also

                                                                                                                                                                                                                                                                                                                                                                          • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                                        interface ICheckboxGroup

                                                                                                                                                                                                                                                                                                                                                                        interface ICheckboxGroup {}

                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                          children?: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                          • The content of the checkbox group. Must be the Checkbox component

                                                                                                                                                                                                                                                                                                                                                                          property defaultValue

                                                                                                                                                                                                                                                                                                                                                                          defaultValue?: Array<ICheckbox['value']>;
                                                                                                                                                                                                                                                                                                                                                                          • The initial value of the checkbox group

                                                                                                                                                                                                                                                                                                                                                                          property id

                                                                                                                                                                                                                                                                                                                                                                          id?: ICheckbox['id'];
                                                                                                                                                                                                                                                                                                                                                                          • The id of the checkbox group.

                                                                                                                                                                                                                                                                                                                                                                          property isInline

                                                                                                                                                                                                                                                                                                                                                                          isInline?: boolean;
                                                                                                                                                                                                                                                                                                                                                                          • If true, the checkboxes will aligned horizontally.

                                                                                                                                                                                                                                                                                                                                                                          property name

                                                                                                                                                                                                                                                                                                                                                                          name?: ICheckbox['name'];
                                                                                                                                                                                                                                                                                                                                                                          • The name of the checkbox group. This prop is passed to each checbox

                                                                                                                                                                                                                                                                                                                                                                          property onChange

                                                                                                                                                                                                                                                                                                                                                                          onChange?: (value: Array<ICheckbox['value']>) => void;
                                                                                                                                                                                                                                                                                                                                                                          • The callback fired when any children Checkbox is checked or unchecked

                                                                                                                                                                                                                                                                                                                                                                          property size

                                                                                                                                                                                                                                                                                                                                                                          size?: ICheckbox['size'];
                                                                                                                                                                                                                                                                                                                                                                          • The size of the checkbox. It's forwarded to all children checkbox

                                                                                                                                                                                                                                                                                                                                                                          property spacing

                                                                                                                                                                                                                                                                                                                                                                          spacing?: StyledSystem.MarginProps['margin'];
                                                                                                                                                                                                                                                                                                                                                                          • The space between each checkbox

                                                                                                                                                                                                                                                                                                                                                                          property value

                                                                                                                                                                                                                                                                                                                                                                          value?: Array<ICheckbox['value']>;
                                                                                                                                                                                                                                                                                                                                                                          • The value of the checkbox group

                                                                                                                                                                                                                                                                                                                                                                          property variantColor

                                                                                                                                                                                                                                                                                                                                                                          variantColor?: ICheckbox['variantColor'];
                                                                                                                                                                                                                                                                                                                                                                          • The color of the checkbox when it's checked.

                                                                                                                                                                                                                                                                                                                                                                          interface ICollapse

                                                                                                                                                                                                                                                                                                                                                                          interface ICollapse {}

                                                                                                                                                                                                                                                                                                                                                                            property animateOpacity

                                                                                                                                                                                                                                                                                                                                                                            animateOpacity?: boolean;
                                                                                                                                                                                                                                                                                                                                                                            • If true, the opacity of the content will be animated

                                                                                                                                                                                                                                                                                                                                                                            property duration

                                                                                                                                                                                                                                                                                                                                                                            duration?: number;
                                                                                                                                                                                                                                                                                                                                                                            • The duration of the animation in ms

                                                                                                                                                                                                                                                                                                                                                                            property endingHeight

                                                                                                                                                                                                                                                                                                                                                                            endingHeight?: number | string;
                                                                                                                                                                                                                                                                                                                                                                            • The height you want the content in it's expanded state. Set to auto by default

                                                                                                                                                                                                                                                                                                                                                                            property isOpen

                                                                                                                                                                                                                                                                                                                                                                            isOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                            • If true, the content will be visible

                                                                                                                                                                                                                                                                                                                                                                            property startingHeight

                                                                                                                                                                                                                                                                                                                                                                            startingHeight?: number | string;
                                                                                                                                                                                                                                                                                                                                                                            • The height you want the content in it's collapsed state. Set to 0 by default

                                                                                                                                                                                                                                                                                                                                                                            method onAnimationEnd

                                                                                                                                                                                                                                                                                                                                                                            onAnimationEnd: (props: { newHeight: number }) => void;
                                                                                                                                                                                                                                                                                                                                                                            • The function to be called when the collapse animation starts. It provides the newHeight as an argument

                                                                                                                                                                                                                                                                                                                                                                            method onAnimationStart

                                                                                                                                                                                                                                                                                                                                                                            onAnimationStart: (props: { newHeight: number }) => void;
                                                                                                                                                                                                                                                                                                                                                                            • The function to be called when the collapse animation ends. It provides the newHeight as an argument

                                                                                                                                                                                                                                                                                                                                                                            interface IColorModeProvider

                                                                                                                                                                                                                                                                                                                                                                            interface IColorModeProvider {}

                                                                                                                                                                                                                                                                                                                                                                              property children

                                                                                                                                                                                                                                                                                                                                                                              children: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                property value

                                                                                                                                                                                                                                                                                                                                                                                value?: 'light' | 'dark';

                                                                                                                                                                                                                                                                                                                                                                                  interface IControlBox

                                                                                                                                                                                                                                                                                                                                                                                  interface IControlBox {}

                                                                                                                                                                                                                                                                                                                                                                                    property type

                                                                                                                                                                                                                                                                                                                                                                                    type?: 'checkbox' | 'radio';

                                                                                                                                                                                                                                                                                                                                                                                      interface IDrawer

                                                                                                                                                                                                                                                                                                                                                                                      interface IDrawer extends IModal {}

                                                                                                                                                                                                                                                                                                                                                                                        property finalFocusRef

                                                                                                                                                                                                                                                                                                                                                                                        finalFocusRef?: IModal['finalFocusRef'];
                                                                                                                                                                                                                                                                                                                                                                                        • The element to receive focus when the drawer closes. You could point it to the element that triggered the drawer

                                                                                                                                                                                                                                                                                                                                                                                        property isFullHeight

                                                                                                                                                                                                                                                                                                                                                                                        isFullHeight?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                        • If true, the drawer fills the height of the viewport by default.

                                                                                                                                                                                                                                                                                                                                                                                        property placement

                                                                                                                                                                                                                                                                                                                                                                                        placement?: 'top' | 'left' | 'bottom' | 'right';
                                                                                                                                                                                                                                                                                                                                                                                        • Set the position of the drawer should slide from.

                                                                                                                                                                                                                                                                                                                                                                                        property size

                                                                                                                                                                                                                                                                                                                                                                                        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
                                                                                                                                                                                                                                                                                                                                                                                        • The size of the drawer when placement is left or right.

                                                                                                                                                                                                                                                                                                                                                                                        interface IFormControl

                                                                                                                                                                                                                                                                                                                                                                                        interface IFormControl extends UseFormControlProps {}

                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                          children?: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                          • Content of the form control.

                                                                                                                                                                                                                                                                                                                                                                                          interface IGrid

                                                                                                                                                                                                                                                                                                                                                                                          interface IGrid {}

                                                                                                                                                                                                                                                                                                                                                                                            property area

                                                                                                                                                                                                                                                                                                                                                                                            area?: StyledSystem.GridAreaProps['gridArea'];

                                                                                                                                                                                                                                                                                                                                                                                              property autoColumns

                                                                                                                                                                                                                                                                                                                                                                                              autoColumns?: StyledSystem.GridAutoColumnsProps['gridAutoColumns'];

                                                                                                                                                                                                                                                                                                                                                                                                property autoFlow

                                                                                                                                                                                                                                                                                                                                                                                                autoFlow?: StyledSystem.GridAutoFlowProps['gridAutoFlow'];

                                                                                                                                                                                                                                                                                                                                                                                                  property autoRows

                                                                                                                                                                                                                                                                                                                                                                                                  autoRows?: StyledSystem.GridAutoRowsProps['gridAutoRows'];

                                                                                                                                                                                                                                                                                                                                                                                                    property column

                                                                                                                                                                                                                                                                                                                                                                                                    column?: StyledSystem.GridColumnProps['gridColumn'];

                                                                                                                                                                                                                                                                                                                                                                                                      property columnGap

                                                                                                                                                                                                                                                                                                                                                                                                      columnGap?: StyledSystem.GridColumnGapProps['gridColumnGap'];

                                                                                                                                                                                                                                                                                                                                                                                                        property gap

                                                                                                                                                                                                                                                                                                                                                                                                        gap?: StyledSystem.GridGapProps['gridGap'];

                                                                                                                                                                                                                                                                                                                                                                                                          property row

                                                                                                                                                                                                                                                                                                                                                                                                          row?: StyledSystem.GridRowProps['gridRow'];

                                                                                                                                                                                                                                                                                                                                                                                                            property rowGap

                                                                                                                                                                                                                                                                                                                                                                                                            rowGap?: StyledSystem.GridRowGapProps['gridRowGap'];

                                                                                                                                                                                                                                                                                                                                                                                                              property templateAreas

                                                                                                                                                                                                                                                                                                                                                                                                              templateAreas?: StyledSystem.GridTemplateAreasProps['gridTemplateAreas'];

                                                                                                                                                                                                                                                                                                                                                                                                                property templateColumns

                                                                                                                                                                                                                                                                                                                                                                                                                templateColumns?: StyledSystem.GridTemplateColumnsProps['gridTemplateColumns'];

                                                                                                                                                                                                                                                                                                                                                                                                                  property templateRows

                                                                                                                                                                                                                                                                                                                                                                                                                  templateRows?: StyledSystem.GridTemplateRowsProps['gridTemplateRows'];

                                                                                                                                                                                                                                                                                                                                                                                                                    interface IInput

                                                                                                                                                                                                                                                                                                                                                                                                                    interface IInput<T = HTMLInputElement> {}

                                                                                                                                                                                                                                                                                                                                                                                                                      property "aria-describedby"

                                                                                                                                                                                                                                                                                                                                                                                                                      'aria-describedby'?: React.AriaAttributes['aria-describedby'];
                                                                                                                                                                                                                                                                                                                                                                                                                      • [ARIA] The id of the element that describes the input.

                                                                                                                                                                                                                                                                                                                                                                                                                      property "aria-label"

                                                                                                                                                                                                                                                                                                                                                                                                                      'aria-label'?: React.AriaAttributes['aria-label'];
                                                                                                                                                                                                                                                                                                                                                                                                                      • [ARIA] The accessible label to use, in scenarios where the input as no visible label

                                                                                                                                                                                                                                                                                                                                                                                                                      property as

                                                                                                                                                                                                                                                                                                                                                                                                                      as?: React.ElementType;
                                                                                                                                                                                                                                                                                                                                                                                                                      • The element or component to use in place of input

                                                                                                                                                                                                                                                                                                                                                                                                                      property errorBorderColor

                                                                                                                                                                                                                                                                                                                                                                                                                      errorBorderColor?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                      • The border color when the input is invalid. Use color keys in theme.colors

                                                                                                                                                                                                                                                                                                                                                                                                                        Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                        errorBorderColor = "red.500"

                                                                                                                                                                                                                                                                                                                                                                                                                      property focusBorderColor

                                                                                                                                                                                                                                                                                                                                                                                                                      focusBorderColor?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                      • The border color when the input is focused. Use color keys in theme.colors

                                                                                                                                                                                                                                                                                                                                                                                                                        Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                        focusBorderColor = "blue.500"

                                                                                                                                                                                                                                                                                                                                                                                                                      property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                      isDisabled?: React.InputHTMLAttributes<T>['disabled'];
                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the input will be disabled. This sets aria-disabled=true and you can style this state by passing _disabled prop

                                                                                                                                                                                                                                                                                                                                                                                                                      property isFullWidth

                                                                                                                                                                                                                                                                                                                                                                                                                      isFullWidth?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the input element will span the full width of it's parent

                                                                                                                                                                                                                                                                                                                                                                                                                      property isInvalid

                                                                                                                                                                                                                                                                                                                                                                                                                      isInvalid?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the input will indicate an error. This sets aria-invalid=true and you can style this state by passing _invalid prop

                                                                                                                                                                                                                                                                                                                                                                                                                      property isReadOnly

                                                                                                                                                                                                                                                                                                                                                                                                                      isReadOnly?: React.InputHTMLAttributes<T>['readOnly'];
                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, prevents the value of the input from being edited.

                                                                                                                                                                                                                                                                                                                                                                                                                      property isRequired

                                                                                                                                                                                                                                                                                                                                                                                                                      isRequired?: React.InputHTMLAttributes<T>['required'];
                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the input element will be required.

                                                                                                                                                                                                                                                                                                                                                                                                                      property size

                                                                                                                                                                                                                                                                                                                                                                                                                      size?: Size;
                                                                                                                                                                                                                                                                                                                                                                                                                      • The visual size of the input element.

                                                                                                                                                                                                                                                                                                                                                                                                                      property variant

                                                                                                                                                                                                                                                                                                                                                                                                                      variant?: Variant;
                                                                                                                                                                                                                                                                                                                                                                                                                      • The variant of the input style to use.

                                                                                                                                                                                                                                                                                                                                                                                                                      interface IInputGroup

                                                                                                                                                                                                                                                                                                                                                                                                                      interface IInputGroup {}

                                                                                                                                                                                                                                                                                                                                                                                                                        property children

                                                                                                                                                                                                                                                                                                                                                                                                                        children: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                          property size

                                                                                                                                                                                                                                                                                                                                                                                                                          size?: IInput['size'];
                                                                                                                                                                                                                                                                                                                                                                                                                            interface ILink {}

                                                                                                                                                                                                                                                                                                                                                                                                                              property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                              isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                              • If true, the link will be disabled and not tabbable

                                                                                                                                                                                                                                                                                                                                                                                                                              property isExternal

                                                                                                                                                                                                                                                                                                                                                                                                                              isExternal?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                              • If true, the link will open in new tab

                                                                                                                                                                                                                                                                                                                                                                                                                              property onClick

                                                                                                                                                                                                                                                                                                                                                                                                                              onClick?: React.MouseEventHandler<HTMLAnchorElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                              • Action to perform when clicked

                                                                                                                                                                                                                                                                                                                                                                                                                              interface IMenu

                                                                                                                                                                                                                                                                                                                                                                                                                              interface IMenu {}

                                                                                                                                                                                                                                                                                                                                                                                                                                property autoSelect

                                                                                                                                                                                                                                                                                                                                                                                                                                autoSelect?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                  property closeOnBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                  closeOnBlur?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                    property closeOnSelect

                                                                                                                                                                                                                                                                                                                                                                                                                                    closeOnSelect?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                      property isOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                      isOpen?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IMenuButton

                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IMenuButton {}

                                                                                                                                                                                                                                                                                                                                                                                                                                          property onClick

                                                                                                                                                                                                                                                                                                                                                                                                                                          onClick?: React.MouseEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                            property onKeyDown

                                                                                                                                                                                                                                                                                                                                                                                                                                            onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IMenuItemOption

                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IMenuItemOption {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                children: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isChecked

                                                                                                                                                                                                                                                                                                                                                                                                                                                  isChecked?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                    isDisabled?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onClick

                                                                                                                                                                                                                                                                                                                                                                                                                                                      onClick?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                        property onKeyDown

                                                                                                                                                                                                                                                                                                                                                                                                                                                        onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                          property onMouseLeave

                                                                                                                                                                                                                                                                                                                                                                                                                                                          onMouseLeave?: React.MouseEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                            property onMouseMove

                                                                                                                                                                                                                                                                                                                                                                                                                                                            onMouseMove?: React.MouseEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                              property type

                                                                                                                                                                                                                                                                                                                                                                                                                                                              type?: 'radio' | 'checkbox';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                value?: string | number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface IMenuList

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface IMenuList {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property onBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    onBlur?: React.FocusEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onKeydown

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      onKeydown?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IMenuOptionGroup

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IMenuOptionGroup {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property defaultValue

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            defaultValue?: stringOrNumber;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              name?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property onChange

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                onChange?: (value: stringOrNumber) => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property title

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  title?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property type

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type?: 'radio' | 'checkbox';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      value?: stringOrNumber;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IModal

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IModal {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property addAriaLabels

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          addAriaLabels?: boolean | { header?: boolean; body?: boolean };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • By default, a unique id is passed to the header and body. These ids are used to add aria-labelledby and aria-describedby to the ModalContent.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            You can configure this behavior: - Set it to false if you'd like to manually add the aria-* attributes. - Set it to {header: false} if you don't render the ModalHeader within the modal. We'll remove the aria-labelledby prop.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            true

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property blockScrollOnMount

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          blockScrollOnMount?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • If true, scrolling will be disabled on the body when the modal opens. true

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The content of the modal.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property closeOnEsc

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          closeOnEsc?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • If true, the modal will close when the Esc key is pressed true

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property closeOnOverlayClick

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          closeOnOverlayClick?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • If true, the modal will close when the overlay is clicked true

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property container

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          container?: React.RefObject<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property finalFocusRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            finalFocusRef?: React.RefObject<HTMLElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The ref of element to receive focus when the modal closes.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property formatIds

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            formatIds?: (id: string | number) => {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            content: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            header: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            body: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The function to format the ids passed to the ModalHeader, Modalbody, and ModalContent

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property id

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            id?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The id of the modal

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property initialFocusRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            initialFocusRef?: React.RefObject<HTMLElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The ref of element to receive focus when the modal opens.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property isCentered

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            isCentered?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the modal will be centered on screen.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property isOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            isOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the modal when be opened.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property onClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            onClose?: (
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            event: React.MouseEvent | React.KeyboardEvent,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            reason?: 'pressedEscape' | 'clickedOverlay'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ) => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Callback invoked to close the modal.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property preserveScrollBarGap

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            preserveScrollBarGap?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, a padding-right will be applied to the body element that's equal to the width of the scrollbar.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property returnFocusOnClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            returnFocusOnClose?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the modal will return focus to the element that triggered it when it closes.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property scrollBehavior

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            scrollBehavior?: 'inside' | 'outside';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Where scroll behaviour should originate. - If set to inside, scroll only occurs within the ModalBody. - If set to outside, the entire ModalContent will scroll within the viewport.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            size?: ModalSizes | BoxProps['maxWidth'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The size (maxWidth) of the modal.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property useInert

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            useInert?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • A11y: If true, the siblings of the Modal will have aria-hidden set to true so that screen readers can only see the Modal.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              This is commonly known as making the other elements **inert**

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              true

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IModalContent

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IModalContent {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              children: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property onClick

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                onClick?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property zIndex

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  zIndex?: BoxProps['zIndex'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface INumberInput

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface INumberInput extends UseNumberInputProps {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property isFullWidth

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      isFullWidth?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        size?: InputProps['size'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface IPopover

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface IPopover {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property closeOnBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            closeOnBlur?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the popover will close when you blur out it by clicking outside or tabbing out

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property closeOnEsc

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            closeOnEsc?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the popover will close when you hit the Esc key

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property defaultIsOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            defaultIsOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the popover will be initially opened.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property gutter

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            gutter?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The gap (in pixels) to apply between the popover and the target. Used by popper.js

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property id

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            id?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The html id attribute of the popover. If not provided, we generate a unique id.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              This id is also used to auto-generate the aria-labelledby and aria-decribedby attributes that points to the PopoverHeader and PopoverBody

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property initialFocusRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            initialFocusRef?: React.RefObject<HTMLElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The ref of the element that should receive focus when the popover opens.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property isOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            isOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the popover will be opened in controlled mode.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property onClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            onClose?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Callback fired when the popover closes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property onOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            onOpen?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Callback fired when the popover opens

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property placement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            placement?: PopperJS.Placement;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The placment of the popover

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property returnFocusOnClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            returnFocusOnClose?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true, the popover will return focus to the trigger when it closes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property trigger

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            trigger?: 'hover' | 'click';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The interaction that triggers the popover.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              click - means the popover will open on click or press Enter to Space on keyboard

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property usePortal

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            usePortal?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • If true the popover is displayed with a Portal. Rendering content inside a Portal allows the popover content to escape the physical bounds of its parent while still being positioned correctly relative to its target

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IPopoverContent

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IPopoverContent {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property "aria-label"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              'aria-label'?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • If the PopoverHeading isn't rendered, use this prop to add an accessible label to the popover.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property gutter

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              gutter?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property onBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                onBlur?: React.FocusEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onFocus

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onFocus?: React.FocusEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property onKeyDown

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onMouseEnter

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      onMouseEnter?: React.MouseEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property onMouseLeave

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        onMouseLeave?: React.MouseEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface IPopoverTrigger

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface IPopoverTrigger {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            children: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IProgress

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IProgress {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property color

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                color?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property hasStripe

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  hasStripe?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isAnimated

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    isAnimated?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property max

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      max?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property min

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        min?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          size?: 'lg' | 'md' | 'sm';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            value?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IRadio

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface IRadio {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property "aria-label"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                'aria-label'?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The aria-label attribute associated with the radio element

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property "aria-labelledby"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                'aria-labelledby'?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The aria-labelledby attribute associated with the radio element

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property defaultIsChecked

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  defaultIsChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the radio will be initially checked.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property id

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  id?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • id assigned to input

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isChecked

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the radio will be checked. You'll need to pass onChange to update it's value (since it's now controlled)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the radio will be disabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isFullWidth

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isFullWidth?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the radio will occupy the full width of it's parent container

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isInvalid

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isInvalid?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the radio button will be invalid. This sets aria-invalid to true.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  name?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The name of the input field in a radio (Useful for form submission).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onBlur?: React.FocusEventHandler<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property onChange

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    onChange?: React.ChangeEventHandler<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onFocus

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      onFocus?: React.FocusEventHandler<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        size?: 'lg' | 'md' | 'sm';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The size of the radio button

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        value?: string | number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The value to be used in the radio button. This is the value that will be returned on form submission.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property variantColor

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        variantColor?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The color scheme of the radio.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          See Also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IRadioButtonGroup

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IRadioButtonGroup {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property defaultValue

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            defaultValue?: IRadio['value'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property isInline

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              isInline?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                name?: IRadio['name'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onChange

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onChange?: (value: IRadio['value']) => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property spacing

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    spacing?: BoxProps['margin'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      value?: IRadio['value'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IRadioGroup

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IRadioGroup {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property defaultValue

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            defaultValue?: IRadio['value'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property id

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              id?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property isInline

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                isInline?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  name?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property onChange

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    onChange?: (
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    event: React.ChangeEvent<HTMLInputElement>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    value: IRadio['value']
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ) => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property spacing

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      spacing?: BoxProps['margin'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        value?: IRadio['value'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property variantColor

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          variantColor?: IRadio['variantColor'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IScale

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface IScale {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              children: (styles: Object) => React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property duration

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                duration?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property in

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  in: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property initialScale

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    initialScale?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface ISkeleton

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface ISkeleton {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property colorEnd

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        colorEnd?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The color at the animation end

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property colorStart

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        colorStart?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The color at the animation start

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property fadeInDuration

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        fadeInDuration?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The fadeIn duration in seconds

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property isLoaded

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        isLoaded?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • Render only the children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property speed

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        speed?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The animation speed in seconds

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface ISlide

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface ISlide {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property duration

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          duration?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property finalHeight

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            finalHeight?: BoxProps['height'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property finalWidth

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              finalWidth?: BoxProps['maxWidth'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property from

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                from: 'bottom' | 'top' | 'left' | 'right';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property in

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  in: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface ISlideIn

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface ISlideIn {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      children: (styles: Object) => React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property duration

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        duration?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property in

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          in: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property offset

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            offset?: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface ISpinnerProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface ISpinnerProps {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property color

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                color?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The color of the spinner

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property emptyColor

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                emptyColor?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The color of the empty area in the spinner

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property label

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                label?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • For accessibility, it's important to add a fallback loading text. This text will be visible to screen readers.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The size of the spinner

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property speed

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                speed?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The speed of the spinner.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <Spinner speed="0.2s"/>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property thickness

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                thickness?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • The thickness of the spinner

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <Spinner thickness="4px"/>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface ISwitch

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface ISwitch {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property "aria-label"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  'aria-label'?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The aria-label of the switch for accessibility.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property "aria-labelledby"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  'aria-labelledby'?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The aria-labelledby of the switch for accessibility.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  children?: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The children of the switch.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property color

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  color?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The background color of the switch when checked

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property defaultIsChecked

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  defaultIsChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the switch will be initially checked.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isChecked

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isChecked?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, set the switch to the checked state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, set the disabled to the invalid state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isInvalid

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isInvalid?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, set the switch to the invalid state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property name

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  name?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The input name of the switch when used in a form

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  size?: 'sm' | 'md' | 'lg';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The size of the switch

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  value?: string | number | boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The value of the switch.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ITabList

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ITabList {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • The children of the tab list should be Tab.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface ITabPanel

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface ITabPanel {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The children of the tab panel.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property id

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      id?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The id of the tab panel. Used during cloneElement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property isSelected

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      isSelected?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, indicates that the panel is selected. Used during cloneElement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property selectedPanelRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      selectedPanelRef?: React.RefObject<HTMLElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The ref of the panel if it is selected. Used during cloneElement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface ITabPanels

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface ITabPanels {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The children of the tab panels should be TabPanel.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface ITabs

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface ITabs {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property align

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          align?: 'start' | 'center' | 'end';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The alignment of the tabs

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The children of the tabs should be TabPanel and TabList.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property defaultIndex

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          defaultIndex?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The index of the tab that should be activated initially

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property index

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          index?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The index of the activated tab

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property isFitted

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          isFitted?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • If true, tabs will stretch to width of the tablist.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property isManual

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          isManual?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • If true, the tabs will be manually activated and display its panel by pressing Space or Enter.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            If false, the tabs will be automatically activated and their panel is displayed when they receive focus.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property onChange

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          onChange?: (index: number) => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • Callback when the index (controlled or un-controlled) changes.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property orientation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          orientation?: 'vertical' | 'horizontal';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The orientation of the .

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          size?: 'sm' | 'md' | 'lg';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The size of the tab (affects the font-size and padding).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property variant

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          variant?:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'line'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'enclosed'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'enclosed-colored'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'soft-rounded'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'solid-rounded'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 'unstyled';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The style of the tabs to use

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property variantColor

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          variantColor?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          • The color scheme of the tabs

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            🚨Note: This should be one of the color keys in the theme that has 100 - 900 color values (e.g.green, red).

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            See Also

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • http://chakra-ui.com/theme#colors

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface ITag

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          interface ITag {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property size

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            size?: 'sm' | 'md' | 'lg';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The size of the tag.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property variant

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            variant?: IBadge['variant'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The variant of the tag.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property variantColor

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            variantColor?: IBadge['variantColor'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • The color scheme of the tag.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface ITagCloseButton

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface ITagCloseButton {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              isDisabled?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface IToast

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface IToast extends IAlert {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property description

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  description?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The description of the toast

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property duration

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  duration?: number | null;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Duration before dismiss in milliseconds, or null to never dismiss.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isClosable

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isClosable?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true adds a close button to the toast.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onClose?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Callback function to close the toast.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property position

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  position?: keyof typeof Position;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • One of toasted-notes positions.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property title

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  title?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The title of the toast.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ITooltip

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ITooltip {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property "aria-label"

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    'aria-label': string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The ReactNode to be used as the trigger of the tooltip.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property closeOnClick

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      closeOnClick?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • If true hide the tooltip, when the trigger is clicked.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property defaultIsOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      defaultIsOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the tooltip is initially shown.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property hasArrow

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      hasArrow?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • If true display an arrow tip on the tooltip.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property hideDelay

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      hideDelay?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The delay in ms for the tooltip to hide

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property isOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      isOpen?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • If true, the tooltip is shown.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property label

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      label?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The label of the tooltip.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      onClose?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Function called when the tooltip hides.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property onOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      onOpen?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Function called when the tooltip shows.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property placement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      placement?: PopperProps['placement'];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property shouldWrapChildren

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        shouldWrapChildren?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • If true, the tooltip will wrap the children in a span with tabIndex=0

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property showDelay

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        showDelay?: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        • The delay in ms for the tooltip to show

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IUseColorMode

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        interface IUseColorMode {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property colorMode

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          colorMode: 'light' | 'dark';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property toggleColorMode

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            toggleColorMode: () => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface PopoverContextValue

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface PopoverContextValue {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property bodyId

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                bodyId: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property closeOnEsc

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  closeOnEsc: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property headerId

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    headerId: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property initialFocusRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      initialFocusRef: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property isHoveringRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        isHoveringRef: React.RefObject<boolean>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property isOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          isOpen: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property onBlur

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            onBlur: React.FocusEventHandler<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property onClose

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              onClose: () => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                property onOpen

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                onOpen: () => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onToggle

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onToggle: () => void;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property placement

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    placement: PopperJS.Placement;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      property popoverId

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      popoverId: string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        property popoverRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        popoverRef: React.RefObject<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          property referenceRef

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          referenceRef: React.RefObject<HTMLElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            property trigger

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            trigger: 'hover' | 'click';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              property usePortal

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              usePortal: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface PortalProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface PortalProps {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property children

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The children to render into the container.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property container

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  container?: React.ReactInstance | (() => React.ReactInstance | null) | null;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • A node, component instance, or function that returns either. The container will have the portal children appended to it. By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • If true, the children stay within it's parent DOM hierarchy.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  property onRendered

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onRendered?: () => void;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Callback fired once the children has been mounted into the container.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface UseFormControlProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface UseFormControlProps {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isDisabled

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    isDisabled?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • If true set the form control to the disabled state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isInvalid

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    isInvalid?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • If true set the form control to the invalid state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isReadOnly

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    isReadOnly?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • If true set the form control to the read only state.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    property isRequired

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    isRequired?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • If true set the form control to be required.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Type Aliases

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type AccordionHeaderProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type AccordionHeaderProps = PseudoBoxProps & React.ButtonHTMLAttributes<any>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type AccordionItemChildren

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type AccordionItemChildren =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | { children(props: IAccordionItemRenderProps): React.ReactNode }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | { children: React.ReactNode };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • The content of the accordion. The children must be the AccordionHeader and AccordionPanel components.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type AccordionItemProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type AccordionItemProps = IAccordionItem & AccordionItemChildren & PseudoBoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type AccordionProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type AccordionProps = IAccordion & Omit<BoxProps, 'onChange'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type AlertProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type AlertProps = IAlert & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type AspectRatioBoxProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type AspectRatioBoxProps = IAspectRatio & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type AvatarGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type AvatarGroupProps = IAvatarGroup & Omit<BoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type AvatarNameProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type AvatarNameProps = IAvatar['name'] & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type AvatarProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type AvatarProps = IAvatar & Omit<BoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type BadgeProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type BadgeProps = IBadge & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type BoxProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type BoxProps = BoxHTMLProps &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      StyledSystemProps &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ModifiedStyledSystemProps &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      As &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Truncated;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type BreadcrumbItemProps = BreadcrumbProps & {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * If `true`, indicates that the breadcrumb item is active, adds
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * `aria-current=page` and renders a `span`
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        isCurrentPage?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ButtonGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ButtonGroupProps = IButtonGroup & Omit<BoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type ButtonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type ButtonProps = IButton & Omit<PseudoBoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type CheckboxGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type CheckboxGroupProps = ICheckboxGroup & Omit<BoxProps, 'onChange' | 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type CheckboxProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type CheckboxProps = ICheckbox &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                React.RefAttributes<HTMLInputElement> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Omit<BoxProps, 'onChange' | 'defaultChecked'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type CloseButtonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type CloseButtonProps = ICloseButton & Omit<PseudoBoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type CollapseProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type CollapseProps = AnimateHeightProps & ICollapse & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type ControlBoxProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type ControlBoxProps = IControlBox & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type CSSResetProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type CSSResetProps = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        config?: (theme: ITheme, defaultConfig?: ConfigReturnType) => ConfigReturnType;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type EditableProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type EditableProps = IEditable & Omit<BoxProps, 'onChange' | 'onSubmit'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type FlexProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type FlexProps = IFlex & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type FormControlProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type FormControlProps = IFormControl & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type GridProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type GridProps = BoxProps & IGrid;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type HeadingProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type HeadingProps = IHeading & Omit<BoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type IconButtonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type IconButtonProps = IIconButton & _ButtonProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type IconProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type IconProps = IIcon & Omit<BoxProps, 'size'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type IconsType

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type IconsType = Record<string, Icon>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ImageProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ImageProps = IImage & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type InputAddonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type InputAddonProps = IInputAddon & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type InputAttributes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type InputAttributes = React.InputHTMLAttributes<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type InputGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type InputGroupProps = IInputGroup & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type InputProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type InputProps<T = HTMLInputElement> = IInput<T> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  PseudoBoxProps &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  InputHTMLAttributes &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  React.RefAttributes<T>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type InternalState

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type InternalState = { isOpen?: boolean; onClose?: () => void };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type ISelect

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type ISelect = IInput<HTMLSelectElement> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      MergeSelectAttributes &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      React.RefAttributes<HTMLSelectElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type ITheme

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type ITheme = DefaultTheme;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type LinkProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type LinkProps = ILink & PseudoBoxProps & React.HTMLProps<HTMLAnchorElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type MenuButtonProps = PseudoBoxProps & IMenuButton;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type MenuGroupProps = IMenuGroup & BoxProps;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type MenuItemOptionProps = PseudoBoxProps & IMenuItemOption;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MenuItemProps = IMenuItem & PseudoBoxProps;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type MenuListProps = IMenuList & PopperProps;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type MenuOptionGroupProps = MenuGroupProps & IMenuOptionGroup;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type MenuProps = IMenu & MenuChildren;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ModalContentProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ModalContentProps = IModalContent & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type ModalSizes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type ModalSizes =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'xs'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'sm'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'md'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'lg'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | '2xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | '3xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | '4xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | '5xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | '6xl'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 'full';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type NumberInputProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type NumberInputProps = INumberInput &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Omit<FlexProps, 'onChange' | 'ref' | 'size'> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              React.RefAttributes<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type OmittedTypes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type OmittedTypes =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'size'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'disabled'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'required'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'checked'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'defaultChecked'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 'readOnly';

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type PopoverChildren

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type PopoverChildren =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  children: React.ReactNode;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | { children: (props: InternalState) => React.ReactNode };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • The content of the popover

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type PopoverCloseButtonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type PopoverCloseButtonProps = PseudoBoxProps & {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  onClick?: React.MouseEventHandler<HTMLElement>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type PopoverContentProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type PopoverContentProps = IPopoverContent & PopperProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type PopoverProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type PopoverProps = IPopover & PopoverChildren;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type ProgressProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type ProgressProps = IProgress & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type PseudoBoxProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type PseudoBoxProps = IPseudoBoxProps & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type RadioButtonGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type RadioButtonGroupProps = IRadioButtonGroup & Omit<BoxProps, 'onChange'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type RadioGroupProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type RadioGroupProps = IRadioGroup & Omit<BoxProps, 'onChange'>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type RadioProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type RadioProps = IRadio &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Omit<BoxProps, 'onChange' | 'ref' | 'onFocus' | 'onBlur' | 'size'> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                React.RefAttributes<HTMLInputElement>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type ScaleProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type ScaleProps = IScale & TransitionProps<boolean>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type SelectProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type SelectProps = ISelect & {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The props passed to the select's root element.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The internal structure looks like this:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```jsx
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <SelectWrapper {...rootProps}>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <Select /> <== most props go here directly
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <SelectIconWrapper />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * </SelectWrapper>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * In some scenario, you might want to pass some other props to the root.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    rootProps?: BoxProps;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The placeholder for the select. This renders an `<option>` with empty value
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```jsx
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <option value="">{placeholder}</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    placeholder?: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The icon component to render.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * You can use an icon in Chakra or pass a custom icon
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * from libraries like `react-icons`
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * @example
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```jsx
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <Select icon="arrow-down" />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * <Select icon={MdArrowDownward} />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * ```
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    icon?: string | React.ElementType;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The size of the icon
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    iconSize?: BoxProps['size'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * The color of the icon
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    iconColor?: BoxProps['color'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type SimpleGridProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type SimpleGridProps = BoxProps & ISimpleGrid;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type SkeletonProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type SkeletonProps = ISkeleton & BoxProps;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type SlideInProps

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type