rsuite

rsuite

Version 6.0.0
Published 12 hours ago
19.6 MB
14 dependencies
MIT license

Install

npm i rsuite

yarn add rsuite

pnpm add rsuite

Overview

A suite of react components

Index

Variables

variable Accordion

const Accordion: InternalRefForwardingComponent<'div', AccordionProps, never> & {
    Panel: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('..').PanelProps<string | number>,
        never
    > &
        Record<string, never>;
};

The Accordion component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/accordion

variable AccordionPanel

const AccordionPanel: InternalRefForwardingComponent<
    'div',
    PanelProps<string | number>,
    never
> &
    Record<string, never>;

The Panel component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/panel

variable Affix

const Affix: InternalRefForwardingComponent<'div', AffixProps, never> &
    Record<string, never>;

Components such as navigation, buttons, etc. can be fixed in the visible range. Commonly used for pages with long content, fixed the specified elements in the visible range of the page to assist in quick operation.
See Also
- https://rsuitejs.com/components/affix/

variable Animation

const Animation: AnimationAPI;

variable AutoComplete

const AutoComplete: InternalRefForwardingComponent<
    'div',
    AutoCompleteProps<string>,
    never
> &
    Record<string, never>;

Autocomplete function of input field.
See Also
- https://rsuitejs.com/components/auto-complete
  TODO: Remove unnecessary .rs-auto-complete element TODO: role=combobox and aria-autocomplete on input element

variable Avatar

const Avatar: InternalRefForwardingComponent<'div', AvatarProps, never> &
    Record<string, never>;

The Avatar component is used to represent user or brand.
See Also
- https://rsuitejs.com/components/avatar

variable AvatarGroup

const AvatarGroup: InternalRefForwardingComponent<'div', AvatarGroupProps, never> &
    Record<string, never>;

The AvatarGroup component is used to represent a collection of avatars.
See Also
- https://rsuitejs.com/components/avatar

variable Badge

const Badge: InternalRefForwardingComponent<'div', BadgeProps, never> &
    Record<string, never>;

The Badge component is usually used to mark or highlight the status or quantity of an object.
See Also
- https://rsuitejs.com/components/badge

variable Bounce

const Bounce: React.ForwardRefExoticComponent<any>;

Bounce animation component
See Also
- https://rsuitejs.com/components/animation/#bounce

variable Box

const Box: InternalRefForwardingComponent<'div', BoxProps, never> &
    Record<string, never>;

Box component is the base component for all components, providing shorthand for style properties.
See Also
- https://rsuitejs.com/components/box

const Breadcrumb: InternalRefForwardingComponent<'ol', BreadcrumbProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'a',
        import('./BreadcrumbItem').BreadcrumbItemProps,
        never
    > &
        Record<string, never>;
};

The Breadcrumb component is used to indicate the current page location and navigate.
See Also
- https://rsuitejs.com/components/breadcrumb

variable BreadcrumbItem

const BreadcrumbItem: InternalRefForwardingComponent<
    'a',
    BreadcrumbItemProps,
    never
> &
    Record<string, never>;

The <Breadcrumb.Item> component is used to specify each section of the Breadcrumb.
See Also
- https://rsuitejs.com/components/breadcrumb

variable Button

const Button: InternalRefForwardingComponent<'button', ButtonProps, never> &
    Record<string, never>;

The Button component is used to trigger a custom action.
See Also
- https://rsuitejs.com/components/button

variable ButtonGroup

const ButtonGroup: InternalRefForwardingComponent<'div', ButtonGroupProps, never> &
    Record<string, never>;

The ButtonGroup component is used to group a series of buttons together in a single line or column.
See Also
- https://rsuitejs.com/components/button/#button-group

variable ButtonGroupContext

const ButtonGroupContext: React.Context<ButtonGroupContextProps>;

variable ButtonToolbar

const ButtonToolbar: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'div', StackProps, never> & {
        Item: import('../internals/types').InternalRefForwardingComponent<
            'div',
            import('../Stack/StackItem').StackItemProps,
            never
        > &
            Record<string, never>;
    },
    ButtonToolbarProps,
    never
> &
    Record<string, never>;

The ButtonToolbar component is used to group a series of buttons together in a single line.
See Also
- https://rsuitejs.com/components/button/#button-toolbar

variable Calendar

const Calendar: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'div', CalendarProps, never> &
        Record<string, never>,
    CalendarProps,
    never
> &
    Record<string, never>;

The Calendar component is used to select dates.
See Also
- https://rsuitejs.com/components/calendar

variable Card

const Card: InternalRefForwardingComponent<'div', CardProps, never> & {
    Header: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Body: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Footer: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
};

variable CardBody

const CardBody: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

variable CardFooter

const CardFooter: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

variable CardGroup

const CardGroup: InternalRefForwardingComponent<'div', CardGroupProps, never> &
    Record<string, never>;

variable CardHeader

const CardHeader: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

variable Carousel

const Carousel: InternalRefForwardingComponent<'div', CarouselProps, never> &
    Record<string, never>;

The Carousel component is used to display a series of content.
See Also
- https://rsuitejs.com/components/carousel

variable Cascader

const Cascader: CascaderComponent;

The Cascader component displays a hierarchical list of options.
See Also
- https://rsuitejs.com/components/cascader

variable CascadeTree

const CascadeTree: CascadeTreeComponent;

CascadeTree is a component that displays tree-structured data in columns.
See Also
- https://rsuitejs.com/components/cascade-tree

variable Center

const Center: InternalRefForwardingComponent<'div', CenterProps, never> &
    Record<string, never>;

variable Checkbox

const Checkbox: InternalRefForwardingComponent<
    'div',
    CheckboxProps<string | number>,
    never
> &
    Record<string, never>;

The Checkbox component is used for selecting multiple options from a set.
See Also
- https://rsuitejs.com/components/checkbox

variable CheckboxGroup

const CheckboxGroup: InternalRefForwardingComponent<
    'div',
    CheckboxGroupProps<(string | number)[]>,
    never
> &
    Record<string, never>;

The CheckboxGroup component is used for selecting multiple options which are unrelated.
See Also
- https://rsuitejs.com/components/checkbox/#checkbox-group

variable CheckboxGroupContext

const CheckboxGroupContext: React.Context<CheckboxGroupContextValue>;

variable CheckPicker

const CheckPicker: CheckPickerComponent;

A component for selecting checkable items in a dropdown list.
See Also
- https://rsuitejs.com/components/check-picker

variable CheckTree

const CheckTree: InternalRefForwardingComponent<
    'div',
    CheckTreeProps<ValueType>,
    never
> &
    Record<string, never>;

The CheckTree component is used for selecting multiple options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/check-tree

variable CheckTreePicker

const CheckTreePicker: InternalRefForwardingComponent<
    'div',
    CheckTreePickerProps<ValueType>,
    never
> &
    Record<string, never>;

The CheckTreePicker component is used for selecting multiple options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/check-tree-picker

variable Col

const Col: InternalRefForwardingComponent<
    'div',
    ColProps & DeprecatedColProps,
    never
> &
    Record<string, never>;

The Col component is used for layout and grids.
See Also
- https://rsuitejs.com/en/components/grid

variable Collapse

const Collapse: React.ForwardRefExoticComponent<any>;

A Collapse animation component.
See Also
- https://rsuitejs.com/components/animation/#collapse

variable Container

const Container: InternalRefForwardingComponent<'section', any, never> &
    Record<string, never>;

The Container component is used to wrap content in a themed container with a max-width.
See Also
- https://rsuitejs.com/components/container

variable Content

const Content: InternalRefForwardingComponent<'main', Partial<any>, never> &
    Record<string, never>;

The Content component is used to wrap content in a themed container with a max-width.
See Also
- https://rsuitejs.com/components/container/
  For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main" be added to the element to ensure it is accessible

variable DateInput

const DateInput: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'input', InputProps, never> &
        Record<string, never>,
    DateInputProps,
    never
> &
    Record<string, never>;

The DateInput component lets users select a date with the keyboard. 5.58.0
See Also
- https://rsuitejs.com/components/date-input/

variable DatePicker

const DatePicker: InternalRefForwardingComponent<'div', DatePickerProps, never> &
    Record<string, never>;

A date picker allows users to select a date from a calendar.
See Also
- https://rsuitejs.com/components/date-picker

variable DateRangeInput

const DateRangeInput: React.ForwardRefExoticComponent<any>;

The DateRangeInput component lets users select a date with the keyboard. 5.59.0
See Also
- https://rsuitejs.com/components/date-range-input/

variable DateRangePicker

const DateRangePicker: InternalRefForwardingComponent<
    'div',
    DateRangePickerProps,
    never
> &
    typeof StaticMethods;

A date range picker allows you to select a date range from a calendar.
See Also
- https://rsuitejs.com/components/date-range-picker

variable Divider

const Divider: InternalRefForwardingComponent<'div', DividerProps, never> &
    Record<string, never>;

The Divider component is used to separate content.
See Also
- https://rsuitejs.com/components/divider

variable DOMHelper

const DOMHelper: {
    isElement: (value: any) => value is HTMLElement;
    on: any;
    off: any;
    WheelHandler: any;
    DOMMouseMoveTracker: any;
    PointerMoveTracker: any;
    addClass: any;
    removeClass: any;
    hasClass: any;
    toggleClass: any;
    cancelAnimationFramePolyfill: typeof cancelAnimationFrame;
    requestAnimationFramePolyfill:
        | ((callback: FrameRequestCallback) => number)
        | ((callback: (t: number) => void) => NodeJS.Timeout);
    getAnimationEnd: any;
    ownerDocument: any;
    ownerWindow: any;
    getWindow: any;
    getContainer: any;
    canUseDOM: boolean;
    contains: (context: Element, node: Node & ParentNode) => boolean;
    scrollTop: any;
    scrollLeft: any;
    getOffset: any;
    nodeName: any;
    getOffsetParent: any;
    getPosition: any;
    isOverflowing: any;
    getScrollbarSize: any;
    getHeight: any;
    getWidth: any;
    isFocusable: any;
    getStyle: any;
    removeStyle: any;
    addStyle: any;
    translateDOMPositionXY: (
        style: CSSStyleDeclaration,
        x?: number | undefined,
        y?: number | undefined
    ) => CSSStyleDeclaration;
};

a wrapper of dom-lib with some custom methods.
See Also
- https://rsuitejs.com/components/dom-helper/

variable Drawer

const Drawer: InternalRefForwardingComponent<'div', DrawerProps, never> & {
    Body: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('..').BoxProps,
        never
    > &
        Record<string, never>;
    Header: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('../Modal').ModalHeaderProps,
        never
    > &
        Record<string, never>;
    Actions: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Title: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('../internals/utils').ComponentProps,
        never
    > &
        Record<string, never>;
    Footer: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('../internals/utils').ComponentProps,
        never
    > &
        Record<string, never>;
};

The Drawer component is used to display extra content from a main content.
See Also
- https://rsuitejs.com/components/drawer

variable DrawerActions

const DrawerActions: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

variable DrawerBody

const DrawerBody: InternalRefForwardingComponent<'div', BoxProps, never> &
    Record<string, never>;

variable DrawerFooter

const DrawerFooter: InternalRefForwardingComponent<'div', any, never> &
    Record<string, never>;

variable DrawerHeader

const DrawerHeader: InternalRefForwardingComponent<'div', ModalHeaderProps, never> &
    Record<string, never>;

variable DrawerTitle

const DrawerTitle: InternalRefForwardingComponent<'div', any, never> &
    Record<string, never>;

const Dropdown: DropdownComponent;

The Dropdown component is used to select an option from a set of options.
See Also
- https://rsuitejs.com/components/dropdown
  The <Dropdown> API - When used inside <Sidenav>, renders a <TreeviewRootItem>; - Otherwise renders a <MenuRoot>

variable DropdownItem

const DropdownItem: InternalRefForwardingComponent<
    'li',
    DropdownMenuItemProps<any>,
    never
> &
    Record<string, never>;

The <Dropdown.Item> API - When used inside <Sidenav>, renders a <TreeviewItem> - Otherwise renders a <MenuItem>

variable DropdownMenu

const DropdownMenu: React.ForwardRefExoticComponent<any>;

The <Dropdown.Menu> API
Note the difference between this component and <Menu> component: <Menu> is used for ARIA menu control logic and is used internally only. This component is only used for supporting submenu syntax and is assigned to Dropdown.Menu
Example 1
<Dropdown.Item>Item 1</Dropdown.Item> <Dropdown.Menu title="Submenu"> <Dropdown.Item>Sub item</Dropdown.Item> </Dropdown.Menu>

variable DropdownSeparator

const DropdownSeparator: InternalRefForwardingComponent<
    'li',
    DropdownSeparatorProps,
    never
> &
    Record<string, never>;

The <Dropdown.Separator> API
Renders a non-focusable and non-interactive separator Per ARIA APG https://www.w3.org/WAI/ARIA/apg/patterns/menu/

variable DropdownToggle

const DropdownToggle: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'button', ButtonProps, never> &
        Record<string, never>,
    DropdownToggleProps,
    never
> &
    Record<string, never>;

variable Fade

const Fade: React.ForwardRefExoticComponent<any>;

Fade animation component
See Also
- https://rsuitejs.com/components/animation/#fade

variable FlexboxGrid

const FlexboxGrid: InternalRefForwardingComponent<'div', FlexboxGridProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./FlexboxGridItem').FlexboxGridItemProps,
        never
    > &
        Record<string, never>;
};

The FlexboxGrid component is a box that can be used to layout other components.
See Also
- https://rsuitejs.com/components/flexbox-grid
Deprecated
Please use Row instead.
<Row> <Col>1</Col> <Col>2</Col> <Col>3</Col> </Row>

variable FlexboxGridItem

const FlexboxGridItem: InternalRefForwardingComponent<
    'div',
    FlexboxGridItemProps,
    never
> &
    Record<string, never>;

The FlexboxGrid.Item component is used to specify the layout of the child element in the FlexboxGrid component.
See Also
- https://rsuitejs.com/components/flexbox-grid
Deprecated
Please use Col instead.

const Footer: InternalRefForwardingComponent<'footer', Partial<any>, never> &
    Record<string, never>;

The <Footer> component is used to specify the footer of the page.
See Also
- https://rsuitejs.com/components/container/

variable Form

const Form: InternalRefForwardingComponent<
    'form',
    FormProps<Record<string, any>, any, { [x: string]: any }> & { ref?: any },
    never
> & {
    Stack: import('../internals/types').InternalRefForwardingComponent<
        'span',
        import('../FormStack').FormStackProps,
        never
    > &
        Record<string, never>;
    Control: FormControlComponent;
    Label: import('../internals/types').InternalRefForwardingComponent<
        'label',
        import('../FormControlLabel').FormControlLabelProps,
        never
    > &
        Record<string, never>;
    ErrorMessage: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('../FormErrorMessage').FormErrorMessageProps,
        never
    > &
        Record<string, never>;
    Group: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('../FormGroup').FormGroupProps,
        never
    > &
        Record<string, never>;
    Text: import('../internals/types').InternalRefForwardingComponent<
        'span',
        import('../FormHelpText').FormHelpTextProps,
        never
    > &
        Record<string, never>;
    ControlLabel: import('../internals/types').InternalRefForwardingComponent<
        'label',
        import('../FormControlLabel').FormControlLabelProps,
        never
    > &
        Record<string, never>;
    HelpText: import('../internals/types').InternalRefForwardingComponent<
        'span',
        import('../FormHelpText').FormHelpTextProps,
        never
    > &
        Record<string, never>;
};

The Form component is a form interface for collecting and validating user input.
See Also
- https://rsuitejs.com/components/form

variable FormControl

const FormControl: FormControlComponent;

The <Form.Control> component is used to wrap the components that need to be validated.
See Also
- https://rsuitejs.com/components/form/

variable FormControlLabel

const FormControlLabel: InternalRefForwardingComponent<
    'label',
    FormControlLabelProps,
    never
> &
    Record<string, never>;

The <Form.ControlLabel> component renders a label with required indicator, for form controls.
See Also
- https://rsuitejs.com/components/form/

variable FormErrorMessage

const FormErrorMessage: InternalRefForwardingComponent<
    'div',
    FormErrorMessageProps,
    never
> &
    Record<string, never>;

The <Form.ErrorMessage> component is used to display error messages in the form.
See Also
- https://rsuitejs.com/components/form/

variable FormGroup

const FormGroup: InternalRefForwardingComponent<'div', FormGroupProps, never> &
    Record<string, never>;

The <Form.Group> component is the easiest way to add some structure to forms.
See Also
- https://rsuitejs.com/components/form/

variable FormHelpText

const FormHelpText: InternalRefForwardingComponent<
    'span',
    FormHelpTextProps,
    never
> &
    Record<string, never>;

The <Form.HelpText> component is used to display help information in the form.
See Also
- https://rsuitejs.com/components/form/

variable FormStack

const FormStack: InternalRefForwardingComponent<'span', FormStackProps, never> &
    Record<string, never>;

The <Form.Stack> component is a quick layout component through Flexbox, supporting vertical and horizontal stacking, custom spacing and line wrapping.
See Also
- https://rsuitejs.com/components/form/

variable Grid

const Grid: InternalRefForwardingComponent<'div', GridProps, never> &
    Record<string, never>;

The Grid component is used to specify the layout of child elements in rows and columns.
See Also
- https://rsuitejs.com/components/grid

const Header: InternalRefForwardingComponent<'header', Partial<any>, never> &
    Record<string, never>;

The <Header> component is used to specify the header of the page.
See Also
- https://rsuitejs.com/components/container/

variable Heading

const Heading: InternalRefForwardingComponent<'h3', HeadingProps, never> &
    Record<string, never>;

The Heading component is used to display a heading.
See Also
- https://rsuitejs.com/components/heading

variable HeadingGroup

const HeadingGroup: InternalRefForwardingComponent<'hgroup', Partial<any>, never> &
    Record<string, never>;

HeadingGroup is a group of headings.
See Also
- https://rsuitejs.com/components/heading

variable Highlight

const Highlight: InternalRefForwardingComponent<'div', HighlightProps, never> &
    Record<string, never>;

Highlight the matching text in the content.
See Also
- https://rsuitejs.com/components/highlight

variable HStack

const HStack: InternalRefForwardingComponent<'div', HStackProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./StackItem').StackItemProps,
        never
    > &
        Record<string, never>;
};

variable IconButton

const IconButton: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'button', ButtonProps, never> &
        Record<string, never>,
    IconButtonProps,
    never
> &
    Record<string, never>;

The IconButton component is used to specify a button with icon.
See Also
- https://rsuitejs.com/components/button

variable Image

const Image: InternalRefForwardingComponent<'img', ImageProps, never> &
    Record<string, never>;

variable InlineEdit

const InlineEdit: any;

variable Input

const Input: InternalRefForwardingComponent<'input', InputProps, never> &
    Record<string, never>;

The <Input> component is used to get user input in a text field.
See Also
- https://rsuitejs.com/components/input

variable InputGroup

const InputGroup: InternalRefForwardingComponent<'div', InputGroupProps, never> & {
    Addon: import('../internals/types').InternalRefForwardingComponent<
        'span',
        import('./InputGroupAddon').InputGroupAddonProps,
        never
    > &
        Record<string, never>;
    Button: React.ForwardRefExoticComponent<any>;
};

The InputGroup component is used to specify an input field with an add-on.
See Also
- https://rsuitejs.com/components/input/#input-group

variable InputGroupAddon

const InputGroupAddon: InternalRefForwardingComponent<
    'span',
    InputGroupAddonProps,
    never
> &
    Record<string, never>;

The InputGroup.Addon component is used to specify an input field with an add-on.
See Also
- https://rsuitejs.com/components/input/#input-group

variable InputGroupButton

const InputGroupButton: React.ForwardRefExoticComponent<any>;

The InputGroup.Button component is used to specify an input field with an add-on.
See Also
- https://rsuitejs.com/components/input/#input-group

variable InputGroupContext

const InputGroupContext: React.Context<{
    onFocus: () => void;
    onBlur: () => void;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
}>;

variable InputNumber

const InputNumber: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'div', InputGroupProps, never> & {
        Addon: import('../internals/types').InternalRefForwardingComponent<
            'span',
            import('..').InputGroupAddonProps,
            never
        > &
            Record<string, never>;
        Button: any;
    },
    InputNumberProps<string | number>,
    never
> &
    Record<string, never>;

The InputNumber component is used to enter a numerical value.
See Also
- https://rsuitejs.com/components/number-input
Deprecated
Use NumberInput instead.

variable InputPicker

const InputPicker: InternalRefForwardingComponent<
    'div',
    InputPickerProps<any>,
    never
> &
    Record<string, never>;

Single item selector with text box input.
See Also
- https://rsuitejs.com/components/input-picker

variable Kbd

const Kbd: InternalRefForwardingComponent<'kbd', KbdProps, never> &
    Record<string, never>;

The Kbd component is used to display a Kbd.
See Also
- https://rsuitejs.com/components/kbd

variable Link

const Link: InternalRefForwardingComponent<'a', LinkProps, never> &
    Record<string, never>;

variable List

const List: InternalRefForwardingComponent<'div', ListProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./ListItem').ListItemProps,
        never
    > &
        Record<string, never>;
};

The List component is used to specify the layout of the list.
See Also
- https://rsuitejs.com/components/list

variable ListItem

const ListItem: InternalRefForwardingComponent<'div', ListItemProps, never> &
    Record<string, never>;

The List.Item component is used to specify the layout of the list item.
See Also
- https://rsuitejs.com/components/list

variable Loader

const Loader: InternalRefForwardingComponent<'div', LoaderProps, never> &
    Record<string, never>;

The Loader component is used to indicate the loading state of a page or a section.
See Also
- https://rsuitejs.com/components/loader

variable MaskedInput

const MaskedInput: InternalRefForwardingComponent<'input', MaskedInputProps, never> &
    Record<string, never>;

const Menu: InternalRefForwardingComponent<
    'ul',
    MenuProps<string | number>,
    never
> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'li',
        import('./MenuItem').MenuItemProps<any>,
        never
    > &
        Record<string, never>;
    Separator: import('../internals/types').InternalRefForwardingComponent<
        'li',
        import('./MenuSeparator').MenuSeparatorProps,
        never
    > &
        Record<string, never>;
};

The <Menu> component is used to create a menu.
See Also
- https://rsuitejs.com/components/menu

variable MenuItem

const MenuItem: InternalRefForwardingComponent<'li', MenuItemProps<any>, never> &
    Record<string, never>;

variable MenuSeparator

const MenuSeparator: InternalRefForwardingComponent<
    'li',
    MenuSeparatorProps,
    never
> &
    Record<string, never>;

The <Menu.Separator> API

variable Message

const Message: InternalRefForwardingComponent<'div', MessageProps, never> &
    Record<string, never>;

The Message component is used to display important messages to users.
See Also
- https://rsuitejs.com/components/message

const Modal: InternalRefForwardingComponent<'div', ModalProps, never> & {
    Body: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('..').BoxProps,
        never
    > &
        Record<string, never>;
    Header: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./ModalHeader').ModalHeaderProps,
        never
    > &
        Record<string, never>;
    Title: import('../internals/types').InternalRefForwardingComponent<
        'h4',
        import('../internals/utils').ComponentProps,
        never
    > &
        Record<string, never>;
    Footer: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Dialog: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./ModalDialog').ModalDialogProps,
        never
    > &
        Record<string, never>;
};

The Modal component is used to show content in a layer above the app.
See Also
- https://rsuitejs.com/components/modal

variable ModalBody

const ModalBody: InternalRefForwardingComponent<'div', BoxProps, never> &
    Record<string, never>;

variable ModalDialog

const ModalDialog: InternalRefForwardingComponent<'div', ModalDialogProps, never> &
    Record<string, never>;

variable ModalFooter

const ModalFooter: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

variable ModalHeader

const ModalHeader: InternalRefForwardingComponent<'div', ModalHeaderProps, never> &
    Record<string, never>;

variable ModalTitle

const ModalTitle: InternalRefForwardingComponent<'h4', any, never> &
    Record<string, never>;

variable MultiCascader

const MultiCascader: InternalRefForwardingComponent<
    'div',
    MultiCascaderProps<any>,
    never
> &
    Record<string, never>;

The MultiCascader component is used to select multiple values from cascading options.
See Also
- https://rsuitejs.com/components/multi-cascader/

variable MultiCascadeTree

const MultiCascadeTree: InternalRefForwardingComponent<
    'div',
    MultiCascadeTreeProps<any, any[], any>,
    never
> &
    Record<string, never>;

The MultiCascadeTree component is used to select multiple values from cascading options.
See Also
- https://rsuitejs.com/components/multi-cascade-tree/

variable Nav

const Nav: InternalRefForwardingComponent<'div', NavProps<any>, never> & {
    Dropdown: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./NavDropdown').NavDropdownProps<any>,
        never
    > & {
        Item: import('../internals/types').InternalRefForwardingComponent<
            'li',
            import('./NavDropdownItem').NavDropdownItemProps<any>,
            never
        > &
            Record<string, never>;
        Menu: React.ForwardRefExoticComponent<
            import('./NavDropdownMenu').NavDropdownMenuProps<any> &
                import('../internals/types').SanitizedHTMListProps<
                    HTMLElement,
                    React.HTMLAttributes<HTMLElement>
                > &
                React.RefAttributes<HTMLElement>
        >;
    };
    Item: import('../internals/types').InternalRefForwardingComponent<
        'a',
        import('./NavItem').NavItemProps<string | number>,
        never
    > &
        Record<string, never>;
    Menu: React.ForwardRefExoticComponent<any>;
    MegaMenu: React.ForwardRefExoticComponent<any>;
};

The Nav component is used to create navigation links.
See Also
- https://rsuitejs.com/components/nav

const Navbar: InternalRefForwardingComponent<'div', NavbarProps, never> & {
    Brand: import('../internals/types').InternalRefForwardingComponent<
        'a',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Content: React.ForwardRefExoticComponent<any>;
    Toggle: React.ForwardRefExoticComponent<any>;
    Drawer: React.ForwardRefExoticComponent<any>;
};

The Navbar component is a wrapper that positions navigation elements.
See Also
- https://rsuitejs.com/components/navbar

variable NavbarBrand

const NavbarBrand: InternalRefForwardingComponent<'a', Partial<any>, never> &
    Record<string, never>;

variable NavbarContent

const NavbarContent: React.ForwardRefExoticComponent<any>;

variable NavbarContext

const NavbarContext: React.Context<NavbarContextValue>;

variable NavbarDropdown

const NavbarDropdown: InternalRefForwardingComponent<
    'div',
    NavbarDropdownProps<any>,
    never
> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'li',
        import('../Nav/NavDropdownItem').NavDropdownItemProps<any>,
        never
    > &
        Record<string, never>;
    Menu: React.ForwardRefExoticComponent<any>;
};

variable NavbarDropdownItem

const NavbarDropdownItem: InternalRefForwardingComponent<
    'li',
    NavbarDropdownItemProps<any>,
    never
> &
    Record<string, never>;

variable NavbarDropdownMenu

const NavbarDropdownMenu: React.ForwardRefExoticComponent<any>;

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> within a
<Nav.Menu> <Nav.Menu title="menu"> -> This submenu will render component </Nav.Menu> </Nav.Menu>

variable NavbarDropdownToggle

const NavbarDropdownToggle: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'button', ButtonProps, never> &
        Record<string, never>,
    NavbarDropdownToggleProps,
    never
> &
    Record<string, never>;

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> call
<Nav.Menu> -> This will render component that renders a </Nav.Menu>

variable NavbarItem

const NavbarItem: InternalRefForwardingComponent<
    'a',
    NavbarItemProps<string | number>,
    never
> &
    Record<string, never>;

variable NavbarToggle

const NavbarToggle: React.ForwardRefExoticComponent<any>;

variable NavDropdown

const NavDropdown: InternalRefForwardingComponent<
    'div',
    NavDropdownProps<any>,
    never
> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'li',
        import('./NavDropdownItem').NavDropdownItemProps<any>,
        never
    > &
        Record<string, never>;
    Menu: React.ForwardRefExoticComponent<any>;
};

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> call
Example 1
<Nav.Menu> -> This will render component </Nav.Menu>

variable NavDropdownItem

const NavDropdownItem: InternalRefForwardingComponent<
    'li',
    NavDropdownItemProps<any>,
    never
> &
    Record<string, never>;

variable NavDropdownMenu

const NavDropdownMenu: React.ForwardRefExoticComponent<any>;

variable NavDropdownToggle

const NavDropdownToggle: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'button', ButtonProps, never> &
        Record<string, never>,
    NavDropdownToggleProps,
    never
> &
    Record<string, never>;

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> call
<Nav.Menu> -> This will render component that renders a </Nav.Menu>

variable NavItem

const NavItem: InternalRefForwardingComponent<
    'a',
    NavItemProps<string | number>,
    never
> &
    Record<string, never>;

The Nav.Item component is used to create navigation links.
- When used as direct child of <Nav>, render the NavItem - When used within a <Nav.Menu>, render the NavDropdownItem
See Also
- https://rsuitejs.com/components/nav

variable NavMegaMenu

const NavMegaMenu: React.ForwardRefExoticComponent<any>;

The Nav.MegaMenu component is used to create a mega menu.
See Also
- https://rsuitejs.com/components/navbar/#mega-menu 6.0.0

variable NavMenu

const NavMenu: React.ForwardRefExoticComponent<any>;

The Nav.Menu component is used to create navigation menus.
- When used as direct child of <Nav>, render the NavDropdown - When used within another <Nav.Menu>, render the NavDropdownMenu
See Also
- https://rsuitejs.com/components/nav

variable Notification

const Notification: any;

The Notification component is used to display global messages and notifications.
See Also
- https://rsuitejs.com/components/notification

variable NumberInput

const NumberInput: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'div', InputGroupProps, never> & {
        Addon: import('../internals/types').InternalRefForwardingComponent<
            'span',
            import('../InputGroup/InputGroupAddon').InputGroupAddonProps,
            never
        > &
            Record<string, never>;
        Button: React.ForwardRefExoticComponent<any>;
    },
    NumberInputProps<string | number>,
    never
> &
    Record<string, never>;

The NumberInput component is used to enter a numerical value.
See Also
- https://rsuitejs.com/components/number-input

const Pagination: InternalRefForwardingComponent<
    'div',
    PaginationGroupProps,
    never
> &
    Record<string, never>;

Pagination component for displaying page numbers.
See Also
- https://rsuitejs.com/components/pagination

variable Panel

const Panel: InternalRefForwardingComponent<
    'div',
    PanelProps<string | number>,
    never
> &
    Record<string, never>;

The Panel component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/panel

variable PanelGroup

const PanelGroup: InternalRefForwardingComponent<
    'div',
    PanelGroupProps<KeyType>,
    never
> &
    Record<string, never>;

The PanelGroup component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/panel

variable PanelGroupContext

const PanelGroupContext: React.Context<PanelGroupContext>;

variable PasswordInput

const PasswordInput: InternalRefForwardingComponent<
    'input',
    PasswordInputProps,
    never
> &
    Record<string, never>;

variable PasswordStrengthMeter

const PasswordStrengthMeter: InternalRefForwardingComponent<
    'div',
    PasswordStrengthMeterProps,
    never
> &
    Record<string, never>;

variable PinInput

const PinInput: InternalRefForwardingComponent<'div', PinInputProps, never> &
    Record<string, never>;

variable Placeholder

const Placeholder: Placeholder;

The Placeholder component is used to display the loading state of the block.
See Also
- https://rsuitejs.com/components/placeholder

variable PlaceholderGraph

const PlaceholderGraph: InternalRefForwardingComponent<
    'div',
    PlaceholderGraphProps,
    never
> &
    Record<string, never>;

The Placeholder.Graph component is used to display the loading state of the block.
See Also
- https://rsuitejs.com/components/placeholder

variable PlaceholderGrid

const PlaceholderGrid: InternalRefForwardingComponent<
    'div',
    PlaceholderGridProps,
    never
> &
    Record<string, never>;

The Placeholder.Grid component is used to display the loading state of the block.
See Also
- https://rsuitejs.com/components/placeholder

variable PlaceholderParagraph

const PlaceholderParagraph: InternalRefForwardingComponent<
    'div',
    PlaceholderParagraphProps,
    never
> &
    Record<string, never>;

The Placeholder.Paragraph component is used to display the loading state of the block.
See Also
- https://rsuitejs.com/components/placeholder

const Popover: InternalRefForwardingComponent<'div', PopoverProps, never> &
    Record<string, never>;

The Popover component is used to display a popup window for a target component.
See Also
- https://rsuitejs.com/components/popover

variable Progress

const Progress: Progress;

The Progress component is used to display the progress of current operation.
See Also
- https://rsuitejs.com/components/progress

variable ProgressCircle

const ProgressCircle: InternalRefForwardingComponent<
    'div',
    ProgressCircleProps,
    never
> &
    Record<string, never>;

Display circular progress for an operation.
See Also
- https://rsuitejs.com/components/progress-circle

variable ProgressLine

const ProgressLine: InternalRefForwardingComponent<'div', ProgressLineProps, never> &
    Record<string, never>;

The Progress.Line component is used to display the progress of current operation.
See Also
- https://rsuitejs.com/components/progress/#line

variable Radio

const Radio: InternalRefForwardingComponent<
    'div',
    RadioProps<string | number>,
    never
> &
    Record<string, never>;

The Radio component is a simple radio button.
See Also
- https://rsuitejs.com/components/radio

variable RadioGroup

const RadioGroup: InternalRefForwardingComponent<
    'div',
    RadioGroupProps<string | number>,
    never
> &
    Record<string, never>;

The RadioGroup component is used to group a collection of Radio components.
See Also
- https://rsuitejs.com/components/radio/#radio-group

variable RadioTile

const RadioTile: InternalRefForwardingComponent<
    'label',
    RadioTileProps<string | number>,
    never
> &
    Record<string, never>;

A series of selectable tile components that behave like Radio. 5.35.0
See Also
- https://rsuitejs.com/components/radio-tile/

variable RadioTileGroup

const RadioTileGroup: InternalRefForwardingComponent<
    'div',
    RadioTileGroupProps<string | number>,
    never
> &
    Record<string, never>;

The RadioTileGroup component is used to group a collection of RadioTile components. 5.35.0
See Also
- https://rsuitejs.com/components/radio-tile/

variable RangeSlider

const RangeSlider: InternalRefForwardingComponent<'div', RangeSliderProps, never> &
    Record<string, never>;

The RangeSlider component is used to select a range from a given numerical range.
See Also
- https://rsuitejs.com/components/slider/

variable Rate

const Rate: InternalRefForwardingComponent<'ul', RateProps<number>, never> &
    Record<string, never>;

The Rate component is used for rating. It can be used to evaluate the quality of the content.
See Also
- https://rsuitejs.com/components/rate/

variable Row

const Row: InternalRefForwardingComponent<'div', RowProps, never> &
    Record<string, never>;

The Row component is used to create a row container that can contain Col components.
See Also
- https://rsuitejs.com/components/grid

variable Schema

const Schema: {
    Model: any;
    Types: {
        StringType: typeof StringType;
        NumberType: typeof NumberType;
        ArrayType: typeof ArrayType;
        DateType: typeof DateType;
        ObjectType: typeof ObjectType;
        BooleanType: typeof BooleanType;
        MixedType: typeof MixedType;
    };
};

SchemaTyped is a wrapper of schema-typed library to provide a more friendly API. It is used to validate the data of the model.
See Also
- https://github.com/rsuite/schema-typed#schema-typed

variable SegmentedControl

const SegmentedControl: InternalRefForwardingComponent<
    'div',
    SegmentedControlProps<string | number>,
    never
> &
    Record<string, never>;

The SegmentedControl component is used to offer multiple exclusive options.
See Also
- https://rsuitejs.com/components/segmented-control

variable SelectPicker

const SelectPicker: SelectPickerComponent;

The SelectPicker component is used to select an item from a list of data.
See Also
- https://rsuitejs.com/components/select-picker/

const Sidebar: InternalRefForwardingComponent<'aside', SidebarProps, never> &
    Record<string, never>;

The Sidebar component for use with the Container component.
See Also
- https://rsuitejs.com/components/container/

variable Sidenav

const Sidenav: InternalRefForwardingComponent<
    'div',
    SidenavProps<string | number>,
    never
> & {
    Header: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Body: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Footer: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    GroupLabel: import('../internals/types').InternalRefForwardingComponent<
        'div',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    Toggle: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./SidenavToggle').SidenavToggleProps,
        never
    > &
        Record<string, never>;
};

The Sidenav component is an encapsulation of the page sidebar Nav.
See Also
- https://rsuitejs.com/components/sidenav/

variable SidenavBody

const SidenavBody: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

The Sidenav.Body component for use with the Sidenav component.
See Also
- https://rsuitejs.com/components/sidenav

variable SidenavDropdown

const SidenavDropdown: InternalRefForwardingComponent<
    'div',
    SidenavDropdownProps<any>,
    never
> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'li',
        import('../Nav/NavDropdownItem').NavDropdownItemProps<any>,
        never
    > &
        Record<string, never>;
    Menu: React.ForwardRefExoticComponent<any>;
};

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> within a
<Nav.Menu> -> This submenu will render component </Nav.Menu>

variable SidenavDropdownItem

const SidenavDropdownItem: InternalRefForwardingComponent<
    'li',
    SidenavDropdownItemProps<any>,
    never
> &
    Record<string, never>;

this component is not supposed to be used directly Instead it's rendered by a <Nav.Item> within a
<Nav.Menu> <Nav.Item></Nav.Item> -> This will render component </Nav.Menu>

variable SidenavDropdownToggle

const SidenavDropdownToggle: InternalRefForwardingComponent<
    InternalRefForwardingComponent<'button', ButtonProps, never> &
        Record<string, never>,
    SidenavDropdownToggleProps,
    never
> &
    Record<string, never>;

this component is not supposed to be used directly Instead it's rendered by a <Nav.Menu> call
<Nav.Menu> -> This will render component that renders a </Nav.Menu>

variable SidenavFooter

const SidenavFooter: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

The Sidenav.Footer component for use with the Sidenav component.
See Also
- https://rsuitejs.com/components/sidenav

variable SidenavGroupLabel

const SidenavGroupLabel: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

The Sidenav.GroupLabel component for use with the Sidenav component.
See Also
- https://rsuitejs.com/components/sidenav

variable SidenavHeader

const SidenavHeader: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

The Sidenav.Header component for use with the Sidenav component.
See Also
- https://rsuitejs.com/components/sidenav

variable SidenavItem

const SidenavItem: InternalRefForwardingComponent<
    'li',
    SidenavItemProps<any>,
    never
> &
    Record<string, never>;

variable SidenavToggle

const SidenavToggle: InternalRefForwardingComponent<
    'div',
    SidenavToggleProps,
    never
> &
    Record<string, never>;

variable Slide

const Slide: React.ForwardRefExoticComponent<any>;

Slide animation component
See Also
- https://rsuitejs.com/components/animation/#slide

variable Slider

const Slider: InternalRefForwardingComponent<'div', SliderProps<number>, never> &
    Record<string, never>;

A Slider is an interface for users to adjust a value in a specific range.
See Also
- https://rsuitejs.com/components/slider

variable Stack

const Stack: InternalRefForwardingComponent<'div', StackProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./StackItem').StackItemProps,
        never
    > &
        Record<string, never>;
};

The Stack component is a quick layout component through Flexbox, supporting vertical and horizontal stacking, custom spacing and line wrapping.
See Also
- https://rsuitejs.com/components/stack

variable Stat

const Stat: InternalRefForwardingComponent<'div', StatProps, never> & {
    Label: import('../internals/types').InternalRefForwardingComponent<
        'dt',
        import('./StatLabel').StatLabelProps,
        never
    > &
        Record<string, never>;
    Value: import('../internals/types').InternalRefForwardingComponent<
        'dd',
        import('./StatValue').StatValueProps,
        never
    > &
        Record<string, never>;
    Trend: import('../internals/types').InternalRefForwardingComponent<
        'dd',
        import('./StatTrend').StatTrendProps,
        never
    > &
        Record<string, never>;
    ValueUnit: import('../internals/types').InternalRefForwardingComponent<
        'span',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
    HelpText: import('../internals/types').InternalRefForwardingComponent<
        'span',
        Partial<import('../internals/utils').ComponentProps>,
        never
    > &
        Record<string, never>;
};

variable StatGroup

const StatGroup: InternalRefForwardingComponent<'div', StatGroupProps, never> &
    Record<string, never>;

variable StatHelpText

const StatHelpText: InternalRefForwardingComponent<'span', Partial<any>, never> &
    Record<string, never>;

variable StatLabel

const StatLabel: InternalRefForwardingComponent<'dt', StatLabelProps, never> &
    Record<string, never>;

variable StatTrend

const StatTrend: InternalRefForwardingComponent<'dd', StatTrendProps, never> &
    Record<string, never>;

variable StatValue

const StatValue: InternalRefForwardingComponent<'dd', StatValueProps, never> &
    Record<string, never>;

variable StatValueUnit

const StatValueUnit: InternalRefForwardingComponent<'span', Partial<any>, never> &
    Record<string, never>;

variable StepItem

const StepItem: InternalRefForwardingComponent<'div', StepItemProps, never> &
    Record<string, never>;

The Step.Item component is used to set the layout of the child element in the Steps component.
See Also
- https://rsuitejs.com/components/steps

variable Steps

const Steps: InternalRefForwardingComponent<'div', StepsProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        StepItemProps,
        never
    > &
        Record<string, never>;
};

The Steps component is used to guide users to complete tasks in accordance with the process.
See Also
- https://rsuitejs.com/components/steps

variable Tab

const Tab: React.FC<TabProps>;

variable Table

const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(
    props: any
) => React.ReactElement) & {
    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(
        props: any
    ) => React.ReactElement<unknown, any>;
    Column: any;
    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(
        props: any
    ) => React.ReactElement<unknown, any>;
    ColumnGroup: React.ForwardRefExoticComponent<any>;
};

The Table component is used to display data in a table.
See Also
- https://rsuitejs.com/components/table/

variable Tabs

const Tabs: InternalRefForwardingComponent<'div', TabsProps, never> & {
    Tab: React.FC<TabProps>;
};

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
5.53.0
See Also
- https://rsuitejs.com/components/tabs

variable Tag

const Tag: InternalRefForwardingComponent<'div', TagProps, never> &
    Record<string, never>;

The Tag component is used to label and categorize. It can be used to mark the status of an object or classify it into different categories.
See Also
- https://rsuitejs.com/components/tag

const TagGroup: InternalRefForwardingComponent<'div', Partial<any>, never> &
    Record<string, never>;

The TagGroup component for use with the Tag component.
See Also
- https://rsuitejs.com/components/tag/

variable TagInput

const TagInput: InternalRefForwardingComponent<'div', TagInputProps, never> &
    Record<string, never>;

The TagInput component is an enhancement of Input and supports input tags and management tags.
See Also
- https://rsuitejs.com/components/tag-input

variable TagPicker

const TagPicker: InternalRefForwardingComponent<'div', TagPickerProps<any>, never> &
    Record<string, never>;

TagPicker component enables multi-selection by tags and supports new options.
See Also
- https://rsuitejs.com/components/tag-picker/

variable Text

const Text: InternalRefForwardingComponent<'p', TextProps, never> &
    Record<string, never>;

The Text component is used to display text.
See Also
- https://rsuitejs.com/components/text

variable Textarea

const Textarea: InternalRefForwardingComponent<'textarea', TextareaProps, never> &
    Record<string, never>;

variable Timeline

const Timeline: InternalRefForwardingComponent<'div', TimelineProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./TimelineItem').TimelineItemProps,
        never
    > &
        Record<string, never>;
    ACTIVE_FIRST: (index: number) => boolean;
    ACTIVE_LAST: (index: number, totalItemsCount: number) => boolean;
};

The Timeline component is used to display a list of items in chronological order.
See Also
- https://rsuitejs.com/components/timeline

variable TimelineItem

const TimelineItem: InternalRefForwardingComponent<'div', TimelineItemProps, never> &
    Record<string, never>;

The Timeline.Item component is used to set the layout of the child element in the Timeline component.
See Also
- https://rsuitejs.com/compo◊nents/timeline

variable TimePicker

const TimePicker: InternalRefForwardingComponent<'div', TimePickerProps, never> &
    Record<string, never>;

variable TimeRangePicker

const TimeRangePicker: InternalRefForwardingComponent<
    'div',
    TimeRangePickerProps,
    never
> &
    Record<string, never>;

variable toaster

const toaster: Toaster;

variable Toggle

const Toggle: InternalRefForwardingComponent<'label', ToggleProps, never> &
    Record<string, never>;

The Toggle component is used to activate or deactivate an element.
See Also
- https://rsuitejs.com/components/toggle

const Tooltip: InternalRefForwardingComponent<'div', TooltipProps, never> &
    Record<string, never>;

The Tooltip component is used to describe a element.
See Also
- https://rsuitejs.com/components/tooltip

variable Tree

const Tree: InternalRefForwardingComponent<
    'div',
    TreeProps<string | number>,
    never
> &
    Record<string, never>;

The Tree component is used to display hierarchical data.
See Also
- https://rsuitejs.com/components/tree

variable TreePicker

const TreePicker: InternalRefForwardingComponent<
    'div',
    TreePickerProps<string | number>,
    never
> &
    Record<string, never>;

The TreePicker component is used for selecting single options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/tree-picker/

variable Uploader

const Uploader: InternalRefForwardingComponent<'div', UploaderProps, never> &
    Record<string, never>;

The Uploader component is used to upload files.
See Also
- https://rsuitejs.com/components/uploader

variable VisuallyHidden

const VisuallyHidden: InternalRefForwardingComponent<'span', Partial<any>, never> &
    Record<string, never>;

VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
5.52.0
See Also
- https://rsuitejs.com/components/visually-hidden/

variable VStack

const VStack: InternalRefForwardingComponent<'div', VStackProps, never> & {
    Item: import('../internals/types').InternalRefForwardingComponent<
        'div',
        import('./StackItem').StackItemProps,
        never
    > &
        Record<string, never>;
};

variable Whisper

const Whisper: React.ForwardRefExoticComponent<any>;

The Whisper component is used to display a floating element. It is usually used with the Tooltip and Popover components.
See Also
- https://rsuitejs.com/components/whisper

Functions

function after

after: (afterDate?: string | Date) => DisabledDateFunction;

Disable dates before the specified date.

function afterToday

afterToday: () => DisabledDateFunction;

Disable dates before today.

function allowedDays

allowedDays: (days: number) => DisabledDateFunction;

Only allowed days are specified, other dates are disabled.

function allowedMaxDays

allowedMaxDays: (days: number) => DisabledDateFunction;

Allow the maximum number of days specified, other dates are disabled.

function allowedRange

allowedRange: (
    startDate: string | Date,
    endDate: string | Date
) => DisabledDateFunction;

Allow specified date range, other dates are disabled.

function before

before: (beforeDate?: string | Date) => DisabledDateFunction;

Disable dates after the specified date.

function beforeToday

beforeToday: () => DisabledDateFunction;

Disable dates after today.

function combine

combine: (...args: any) => DisabledDateFunction;

Used to combine multiple conditions.

function CustomProvider

CustomProvider: (
    props: Omit<CustomProviderProps, 'toasters'>
) => React.JSX.Element;

CustomProvider is used to provide global configuration, such as language, theme, etc.
See Also
- https://rsuitejs.com/components/custom-provider

function getDatePattern

getDatePattern: (options: DatePatternOptions) => string;

function getInputSelectedState

getInputSelectedState: (options: SelectedStateOptions) => {
    selectionStart: number;
    selectionEnd: number;
    selectedPattern: string;
};

function getPatternGroups

getPatternGroups: (format: string, pattern: string) => string;

function getSelectIndexGap

getSelectIndexGap: (options: SelectIndexGapOptions) => number;

function isCursorAfterMonth

isCursorAfterMonth: (cursorIndex: number, formatStr: string) => boolean;

function modifyDate

modifyDate: (date: Date, type: string, value: number) => Date;

function PanelBody

PanelBody: (props: PanelBodyProps) => React.JSX.Element;

function PanelHeader

PanelHeader: (props: PanelHeaderProps) => React.JSX.Element;

function useBreakpointValue

useBreakpointValue: <T = any>(
    breakpoints: Record<Query, T>,
    options?: UseBreakpointValueOptions<T>
) => T | undefined;

A React Hook that returns different values based on different screen sizes in responsive design. 5.64.0 Please note that this API is not stable and may change in the future.
Example 1
const fontSize = useBreakpointValue({ sm: "14px", lg: "24px" }, { defaultValue: "16px" }); const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });
See Also
- https://rsuitejs.com/components/use-breakpoint-value

function useDateInputState

useDateInputState: ({
    formatStr,
    locale,
    date,
    isControlledDate,
}: DateInputState) => {
    dateField: import('../DateField').DateField;
    setDateOffset: (
        pattern: string,
        offset: number,
        callback?: (newDate: Date | null) => void
    ) => void;
    setDateField: (
        pattern: string,
        value: number | null,
        callback?: (newDate: Date | null) => void
    ) => void;
    setNewDate: (value: Date | null) => void;
    getDateField: (pattern: string) => { name: any; value: any };
    toDateString: () => string;
    isEmptyValue: (
        type?: string | undefined,
        value?: number | null | undefined
    ) => boolean | undefined;
};

function useDialog

useDialog: () => {
    alert: (message: React.ReactNode, options?: AlertOptions) => Promise<any>;
    confirm: (message: React.ReactNode, options?: ConfirmOptions) => Promise<any>;
    prompt: (message: React.ReactNode, options?: PromptOptions) => Promise<any>;
    open: <P extends object>(
        as: React.ComponentType<P & { onClose: (result?: any) => void }>,
        payload?: P,
        options?: OpenOptions
    ) => Promise<any>;
};

A hook that provides methods to show dialogs.
See Also
- https://rsuitejs.com/components/use-dialog

function useFieldCursor

useFieldCursor: <V = Date>(
    format: string,
    value?: V
) => {
    increment: () => void;
    reset: () => void;
    isMoveCursor: (value: number, pattern: string) => boolean;
    isResetValue: () => boolean;
};

function useFormControl

useFormControl: (props: UseFormControlProps) => {
    value: any;
    error: React.ReactNode;
    plaintext: boolean | undefined;
    readOnly: boolean | undefined;
    disabled: boolean | undefined;
    onChange: (...args: any[]) => any;
    onCheck: (...args: any[]) => any;
    onBlur: (...args: any[]) => any;
    setValue: (value: any, shouldValidate?: boolean) => void;
};

Hook for accessing form control functionality. Must be used within a Form component.
Parameter props
The form control properties
Returns
Form control functionality for the specified field

function useFormGroup

useFormGroup: (controlId?: string) => {
    controlId: string;
    helpTextId: string;
    labelId: string;
    errorMessageId: string;
};

function useInputSelection

useInputSelection: (
    input: React.RefObject<any>
) => (selectionStart: number, selectionEnd: number) => void;

function useIsFocused

useIsFocused: ({
    onFocus: onFocusProp,
    onBlur: onBlurProp,
}: FocusEventOptions) => [boolean, FocusEventOptions];

function useKeyboardInputEvent

useKeyboardInputEvent: ({
    onSegmentChange,
    onSegmentValueChange,
    onSegmentValueChangeWithNumericKeys,
    onSegmentValueRemove,
    onKeyDown,
}: KeyboardEventOptions) => (event: React.KeyboardEvent<HTMLInputElement>) => void;

function useMediaQuery

useMediaQuery: (query: Query | Query[], enabled?: boolean) => boolean[];

React hook that tracks state of a CSS media query 5.48.0 Please note that this API is not stable and may change in the future.
Parameter query
The media query string or array of query strings
Parameter enabled
Whether to enable the media query, defaults to true
See Also
- https://rsuitejs.com/components/use-media-query

function useSelectedState

useSelectedState: () => {
    selectedState: {
        selectedPattern: string;
        selectionStart: number;
        selectionEnd: number;
    };
    setSelectedState: import('react').Dispatch<
        import('react').SetStateAction<{
            selectedPattern: string;
            selectionStart: number;
            selectionEnd: number;
        }>
    >;
};

function useToaster

useToaster: () => {
    push: (
        message: React.ReactNode,
        options?: ToastContainerProps
    ) => string | Promise<string | undefined> | undefined;
    remove: (key: string) => void;
    clear: () => void;
};

Toaster display brief, temporary notifications of actions, errors, or other events in an application. It is often used with the Message and Notification components.
Returns
toaster { push, remove, clear }
See Also
- https://rsuitejs.com/components/use-toaster/

function validateDateTime

validateDateTime: (type: string, value: number) => boolean;

Classes

class Transition

class Transition extends React.Component<TransitionProps, TransitionState> {}

A Transition component for animation.
See Also
- https://rsuitejs.com/components/animation/#transition

constructor

constructor(props: TransitionProps);

property animationEventListener

animationEventListener: EventToken;

property childRef

childRef: React.RefObject<any>;

property defaultProps

static defaultProps: { timeout: number };

property displayName

static displayName: string;

property instanceElement

instanceElement: HTMLElement;

property needsUpdate

needsUpdate: boolean;

property nextCallback

nextCallback: { (event?: React.AnimationEvent): void; cancel: () => any };

method cancelNextCallback

cancelNextCallback: () => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getChildElement

getChildElement: () => HTMLElement;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: TransitionProps,
    prevState: TransitionState
) => { status: STATUS } | null;

method getSnapshotBeforeUpdate

getSnapshotBeforeUpdate: () => null;

method onTransitionEnd

onTransitionEnd: (
    node: HTMLElement,
    handler: (event?: React.AnimationEvent) => void
) => void;

method performEnter

performEnter: (props: TransitionProps) => void;

method performExit

performExit: (props: TransitionProps) => void;

method render

render: () => React.ReactNode;

method safeSetState

safeSetState: (
    nextState: TransitionState,
    callback: (event?: React.AnimationEvent) => void
) => void;

method setNextCallback

setNextCallback: (callback: (event?: React.AnimationEvent) => void) => {
    (event?: React.AnimationEvent<Element> | undefined): void;
    cancel: () => any;
};

Interfaces

interface AffixProps

interface AffixProps extends BoxProps {}

property container

container?: HTMLElement | (() => HTMLElement);

Specify the container.

property onChange

onChange?: (fixed?: boolean) => void;

Callback after the state changes.

property onOffsetChange

onOffsetChange?: (offset?: Offset) => void;

Callback after the offset changes.

property top

top?: number;

Distance from top

interface AnimationAPI

interface AnimationAPI {}

property Bounce

Bounce: FunctionComponent<BounceProps>;

property Collapse

Collapse: ComponentType<CollapseProps>;

property Fade

Fade: FunctionComponent<FadeProps>;

property Slide

Slide: FunctionComponent<SlideProps>;

property Transition

Transition: ComponentType<TransitionProps>;

interface AutoCompleteProps

interface AutoCompleteProps<T = string>
    extends FormControlPickerProps<T, any, Option | string>,
        ListboxProps,
        PopupProps,
        BoxProps {}

property autoComplete

autoComplete?: string;

AutoComplete Content

property filterBy

filterBy?: (value: string, item: Option) => boolean;

Custom filter function to determine whether the item will be displayed

property onBlur

onBlur?: React.FocusEventHandler;

Called on blur

property onClose

onClose?: () => void;

Called on close

property onFocus

onFocus?: React.FocusEventHandler;

Called on focus

property onKeyDown

onKeyDown?: (event: React.KeyboardEvent) => void;

The callback triggered by keyboard events.

property onMenuFocus

onMenuFocus?: (focusItemValue: any, event: React.KeyboardEvent) => void;

Called on menu focus

property onOpen

onOpen?: () => void;

Called on open

property onSelect

onSelect?: (value: any, item: Option, event: React.SyntheticEvent) => void;

Called when a option is selected

property open

open?: boolean;

Open the menu and control it

property placeholder

placeholder?: string;

Placeholder text

property placement

placement?: Placement;

The placement of component

property selectOnEnter

selectOnEnter?: boolean;

When set to false, the Enter key selection function is invalid

property size

size?: BasicSize;

A component can have different sizes

interface AvatarGroupProps

interface AvatarGroupProps extends BoxProps {}

property size

size?: Size;

Set the size of all avatars.

property spacing

spacing?: number;

Set the spacing of the avatar

property stack

stack?: boolean;

Render all avatars as stacks

interface AvatarProps

interface AvatarProps extends BoxProps {}

property alt

alt?: string;

This attribute defines an alternative text description of the image

property bordered

bordered?: boolean;

Show a border around the avatar. 5.59.0

property circle

circle?: boolean;

Set avatar shape to circle

property color

color?: ColorScheme | CSSProperties['color'];

Sets the avatar background color. 5.59.0

property imgProps

imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;

Attributes applied to the img element if the component is used to display an image. It can be used to listen for the loading error event.

property onError

onError?: OnErrorEventHandler;

Callback fired when the image failed to load. 5.59.0

property size

size?: StyledBoxProps['size'];

A avatar can have different sizes.

property sizes

sizes?: string;

The sizes attribute for the img element.

property src

src?: string;

The src attribute for the img element.

property srcSet

srcSet?: string;

The srcSet attribute for the img element. Use this attribute for responsive image display.

interface BadgeProps

interface BadgeProps extends BoxProps {}

property color

color?: Color | React.CSSProperties['color'];

A badge can have different colors

property compact

compact?: boolean;

If true, the Badge will have no padding, making it appear more compact and rounded.

property content

content?: React.ReactNode;

The content of the badge

property invisible

invisible?: boolean;

The badge will be hidden 6.0.0

property maxCount

maxCount?: number;

The maximum value of the badge

property offset

offset?: [number | string, number | string];

Define the horizontal and vertical offset of the badge relative to its wrapped element 6.0.0

property outline

outline?: boolean;

The badge will have an outline 6.0.0

property placement

placement?: PlacementCorners;

The placement of the badge 6.0.0

property shape

shape?: 'rectangle' | 'circle';

The shape of the wrapped element 6.0.0

property size

size?: Size;

A badge can have different sizes

interface BoxProps

interface BoxProps extends WithAsProps, CSSSystemProps {}

property hideFrom

hideFrom?: Breakpoints;

Breakpoint above which the component is hidden with display: none

property showFrom

showFrom?: Breakpoints;

Breakpoint below which the component is shown with display: block

interface BreadcrumbItemProps

interface BreadcrumbItemProps extends BoxProps {}

property active

active?: boolean;

The active state of the BreadcrumbItem.

property href

href?: string;

The href attribute specifies the URL of the page the link goes to.

property icon

icon?: React.ReactNode;

The icon of the BreadcrumbItem.

property separator

separator?: React.ReactNode;

The separator between each breadcrumb item.

property target

target?: string;

The target attribute specifies where to open the linked document.

property title

title?: string;

The title attribute specifies extra information about an element.

property wrapperAs

wrapperAs?: React.ElementType;

The wrapper element of the BreadcrumbItem.

interface BreadcrumbProps

interface BreadcrumbProps extends Omit<StyledBoxProps, 'name'> {}

property ellipsis

ellipsis?: React.ReactNode;

The ellipsis element.

property locale

locale?: BreadcrumbLocale;

The locale of the component.

property maxItems

maxItems?: number;

Set the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first and last will be shown, with an ellipsis in between.

property onExpand

onExpand?: (event: React.MouseEvent) => void;

Callback function for clicking the ellipsis.

property separator

separator?: React.ReactNode;

The separator between each breadcrumb item.

property size

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

The size of the Breadcrumb.

interface ButtonGroupProps

interface ButtonGroupProps extends BoxProps {}

property block

block?: boolean;

Display block buttongroups

property disabled

disabled?: boolean;

A button can show it is currently unable to be interacted with

property divided

divided?: boolean;

Add dividing lines between buttons

property justified

justified?: boolean;

Horizontal constant width layout

property role

role?: string;

An ARIA role describing the button group. Usually the default "group" role is fine. An aria-label or aria-labelledby prop is also recommended.

property size

size?: BasicSize;

A button group can have different sizes

property vertical

vertical?: boolean;

Vertical layouts of button

interface ButtonProps

interface ButtonProps
    extends BoxProps,
        Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {}

property active

active?: boolean;

A button can show it is currently the active user selection

property appearance

appearance?: AppearanceType;

A button can have different appearances.

property block

block?: boolean;

Format button to appear inside a content block

property color

color?: Color;

A button can have different colors

property disabled

disabled?: boolean;

A button can show it is currently unable to be interacted with

property endIcon

endIcon?: React.ReactNode;

The icon element placed _after_ the button text

property href

href?: string;

Providing a href will render an <a> element, _styled_ as a button

property loading

loading?: boolean;

A button can show a loading indicator

property onToggle

onToggle?: (active: boolean, event: React.MouseEvent) => void;

Called when the button is clicked

property ripple

ripple?: boolean;

Ripple after button click

property size

size?: BasicSize;

A button can have different sizes

property startIcon

startIcon?: React.ReactNode;

The icon element placed _before_ the button text

property target

target?: string;

Where to display the linked URL

property toggleable

toggleable?: boolean;

A button can toggle its state between active and inactive.

property type

type?: 'button' | 'reset' | 'submit';

Defines HTML button type attribute

interface ButtonToolbarProps

interface ButtonToolbarProps extends StackProps {}

property role

role?: string;

The ARIA role describing the button toolbar. Generally the default "toolbar" role is correct. An aria-label or aria-labelledby prop is also recommended.

interface CalendarProps

interface CalendarProps extends BoxProps {}

property bordered

bordered?: boolean;

Show border

property cellClassName

cellClassName?: (date: Date) => string | undefined;

Custom cell classes base on it's date

property compact

compact?: boolean;

Display a compact calendar

property defaultValue

defaultValue?: Date;

Default value

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property locale

locale?: CalendarLocale;

Custom locale object
See Also
- https://rsuitejs.com/guide/i18n/#calendar

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onChange

onChange?: (date: Date) => void;

Callback fired before the value changed

property onMonthChange

onMonthChange?: (date: Date) => void;

Callback fired before the month changed @todo-Doma Change signature to onMonthChange(year: number, month: number, reason: string)?

property onSelect

onSelect?: (date: Date) => void;

Callback fired before the date selected

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom render calendar cells

property value

value?: Date;

Controlled value

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface CardGroupProps

interface CardGroupProps extends BoxProps {}

property columns

columns?: number;

The number of columns in the group

property spacing

spacing?: number | string;

Spacing between columns

interface CardProps

interface CardProps extends BoxProps {}

property bordered

bordered?: boolean;

Show border

property direction

direction?: 'row' | 'column';

The direction of the card

property shaded

shaded?: boolean | 'hover';

Whether there is a shadow

property size

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

Different sizes

property width

width?: number | string;

The width of the card

interface CarouselProps

interface CarouselProps extends BoxProps {}

property activeIndex

activeIndex?: number;

Active element index

property autoplay

autoplay?: boolean;

Autoplay element

property autoplayInterval

autoplayInterval?: number;

Autoplay interval

property defaultActiveIndex

defaultActiveIndex?: number;

Defaul initial index

property onSelect

onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;

Callback fired when the active item manually changes

property onSlideEnd

onSlideEnd?: (
    index: number,
    event: React.TransitionEvent<HTMLDivElement>
) => void;

Callback fired when a slide transition ends

property onSlideStart

onSlideStart?: (
    index: number,
    event?: React.ChangeEvent<HTMLInputElement>
) => void;

Callback fired when a slide transition starts

property placement

placement?: 'top' | 'bottom' | 'left' | 'right';

Button placement

property shape

shape?: 'dot' | 'bar';

Button shape

interface CascaderProps

interface CascaderProps<T = OptionValue>
    extends FormControlPickerProps<T, PickerLocale, Option<T>>,
        CascadeTreeProps<T, T, PickerLocale>,
        DeprecatedProps,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property onClean

onClean?: (event: React.SyntheticEvent) => void;

Called when clean

property parentSelectable

parentSelectable?: boolean;

When true, make the parent node selectable

property renderValue

renderValue?: (
    value: T,
    selectedPaths: Option<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface CascadeTreeProps

interface CascadeTreeProps<T = any, V = T, L = any>
    extends BoxProps,
        DataProps<Option<T>> {}

property columnHeight

columnHeight?: number;

Sets the height of the menu

property columnWidth

columnWidth?: number;

Sets the width of the menu

property defaultValue

defaultValue?: V;

Initial value

property disabledItemValues

disabledItemValues?: ToArray<NonNullable<T>>;

Disabled items

property getChildren

getChildren?: (childNodes: Option<T>) => Option<T>[] | Promise<Option<T>[]>;

Asynchronously load the children of the tree node.

property locale

locale?: Partial<L>;

A collection of localized strings.

property onChange

onChange?: (value: V, event: React.SyntheticEvent) => void;

Called after the value has been changed

property onSearch

onSearch?: (value: string, event: React.SyntheticEvent) => void;

Called when searching

property onSelect

onSelect?: (
    value: Option<T>,
    selectedPaths: Option<T>[],
    event: React.SyntheticEvent
) => void;

Called when the option is selected

property renderColumn

renderColumn?: (
    childNodes: React.ReactNode,
    column: CascadeColumn<T>
) => React.ReactNode;

Custom render columns

property renderSearchItem

renderSearchItem?: (
    node: React.ReactNode,
    items: Option<T>[]
) => React.ReactNode;

Custom render search items

property renderTreeNode

renderTreeNode?: (node: React.ReactNode, itemData: Option<T>) => React.ReactNode;

Custom render tree node

property searchable

searchable?: boolean;

Whether dispaly search input box

property value

value?: V;

Selected value

interface CellProps

interface CellProps<Row extends RowDataType>
    extends Omit<TableCellProps<Row>, 'rowData' | 'dataKey'> {}

property dataKey

dataKey?: string | keyof Row;

Data binding key, but also a sort of key

property rowData

rowData?: Row;

Row Data

interface CenterProps

interface CenterProps extends BoxProps {}

property inline

inline?: boolean;

interface CheckboxGroupContextValue

interface CheckboxGroupContextValue {}

property controlled

controlled?: boolean;

property disabled

disabled?: boolean;

property inline

inline?: boolean;

property name

name?: string;

property onChange

onChange?: (
    value: any,
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

property plaintext

plaintext?: boolean;

property readOnly

readOnly?: boolean;

property value

value?: (string | number)[];

interface CheckboxGroupProps

interface CheckboxGroupProps<V = (string | number)[]>
    extends BoxProps,
        FormControlBaseProps<V> {}

property children

children?: React.ReactNode;

Primary content

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Used for the name of the form

interface CheckboxProps

interface CheckboxProps<V = string | number>
    extends BoxProps,
        HTMLPropsWithoutChange<HTMLDivElement> {}

property checkable

checkable?: boolean;

Whether to show checkbox
Used in MultiCascader

property checked

checked?: boolean;

Whether or not checkbox is checked.

property color

color?: Color;

The color of the checkbox when checked or indeterminate
5.56.0

property defaultChecked

defaultChecked?: boolean;

The initial value of checked.

property disabled

disabled?: boolean;

A checkbox can appear disabled and be unable to change states

property indeterminate

indeterminate?: boolean;

Whether or not checkbox is indeterminate.

property inline

inline?: boolean;

Inline layout
Used in CheckboxGroup

property inputProps

inputProps?: React.HTMLAttributes<HTMLInputElement>;

Attributes applied to the input element.

property inputRef

inputRef?: React.Ref<any>;

Pass a ref to the input element.

property labelClickable

labelClickable?: boolean;

Whether the label is clickable
Used in MultiCascader

property name

name?: string;

Used for the name of the form

property onChange

onChange?: (
    value: V | undefined,
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Called when the user attempts to change the checked state.

property onCheckboxClick

onCheckboxClick?: (event: React.SyntheticEvent) => void;

Called when the checkbox is clicked.
Used in MultiCascader

property onClick

onClick?: (event: React.SyntheticEvent) => void;

Called when the checkbox or label is clicked.

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property value

value?: V;

The HTML input value.

interface CheckPickerProps

interface CheckPickerProps<T = any>
    extends FormControlPickerProps<T[], PickerLocale, Option<T>>,
        Omit<SelectProps<T>, 'renderValue'>,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property renderValue

renderValue?: (
    value: T[],
    item: Option<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property sticky

sticky?: boolean;

Top the selected option in the options

interface CheckTreeNodeProps

interface CheckTreeNodeProps extends WithAsProps {}

property allUncheckable

allUncheckable?: boolean;

Whether all nodes are uncheckable.

property checkState

checkState?: CheckStateType;

The check state of the node.

property disabled

disabled?: boolean;

Whether the node is disabled.

property expanded

expanded?: boolean;

Whether the node should be expanded.

property focus

focus?: boolean;

Whether the node should be focused.

property hasChildren

hasChildren?: boolean;

Whether the node has children.

property label

label?: any;

The label of the node.

property layer

layer: number;

The layer of the node in the tree hierarchy.

property loading

loading?: boolean;

Whether the node is in a loading state.

property nodeData

nodeData?: any;

Additional data associated with the node.

property onExpand

onExpand?: (nodeData: TreeNodeData, expanded?: boolean) => void;

Callback function called when the node is expanded.

property onSelect

onSelect?: (nodeData: TreeNodeData, event: React.SyntheticEvent) => void;

Callback function called when the node is selected.

property treeItemRef

treeItemRef?: React.Ref<any>;

Reference to the tree item.

property uncheckable

uncheckable?: boolean;

Whether the node is uncheckable.

property value

value?: any;

The value of the node.

property visible

visible?: boolean;

Whether the node is visible.

interface CheckTreePickerProps

interface CheckTreePickerProps<V = ValueType>
    extends Omit<CheckTreeViewProps<V>, 'value' | 'onChange' | 'data'>,
        TreeExtraProps,
        DeprecatedMenuProps,
        FormControlPickerProps<V, PickerLocale, Option>,
        Pick<PickerToggleProps, 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property onCascadeChange

onCascadeChange?: (v: ValueType, event: React.SyntheticEvent) => void;

In the cascade case, the leaf node's value change callbacks

property popupAutoWidth

popupAutoWidth?: boolean;

Popup auto width
true

property renderValue

renderValue?: (
    value: V,
    selectedNodes: TreeNode[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property treeHeight

treeHeight?: number;

The height of the tree

interface CheckTreeProps

interface CheckTreeProps<T = ValueType>
    extends CheckTreeViewProps<T>,
        TreeExtraProps {}

property defaultValue

defaultValue?: T;

Default selected Value

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

interface CollapseProps

interface CollapseProps extends TransitionProps {}

property dimension

dimension?: DIMENSION | (() => DIMENSION);

The dimension used when collapsing

property getDimensionValue

getDimensionValue?: (dimension: DIMENSION, elem: Element) => number;

Function that returns the height or width of the animating DOM node

interface ColProps

interface ColProps extends BoxProps {}

property hidden

hidden?: boolean | ResponsiveValue<boolean>;

Grid column hidden for different breakpoints

property offset

offset?: number | ResponsiveValue<number>;

Grid column offset for different breakpoints

property order

order?: number | ResponsiveValue<number>;

Grid column order for different breakpoints

property pull

pull?: number | ResponsiveValue<number>;

Grid column pull for different breakpoints

property push

push?: number | ResponsiveValue<number>;

Grid column push for different breakpoints

property span

span?: number | 'auto' | ResponsiveValue<number | 'auto'>;

Grid column span for different breakpoints

interface CustomProviderProps

interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {}

property children

children?: React.ReactNode;

Primary content

property components

components?: Partial<ReactSuiteComponents>;

components allows setting default props for specific components globally. It accepts an object where each key represents a component name (e.g., 'Button', 'Input'), and the corresponding value is an object containing the defaultProps object. The defaultProps object defines the default props for that component. These props will be automatically applied to the component unless overridden by specific props passed in an individual component instance.
Example 1
components={{ Button: { defaultProps: { appearance: 'primary', size: 'lg' } }, Input: { defaultProps: { placeholder: 'Enter text', size: 'lg' } } }}

property csp

csp?: {
    /**
     * Content Security Policy nonce
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
     */
    nonce?: string;
};

property disableInlineStyles

disableInlineStyles?: boolean;

Disable inline styles false

property iconClassPrefix

iconClassPrefix?: string;

The prefix of the icon CSS class

property theme

theme?: 'light' | 'dark' | 'high-contrast';

Supported themes

property toastContainer

toastContainer?: HTMLElement | (() => HTMLElement | null) | null;

Sets a container for toast rendering

interface DateInputProps

interface DateInputProps
    extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>,
        FormControlBaseProps<Date | null> {}

property format

format?: string;

Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
See Also
- https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 'yyyy-MM-dd'

property placeholder

placeholder?: string;

The placeholder prop defines the text displayed in a form control when the control has no value.

interface DatePickerProps

interface DatePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<Date | null>,
        DeprecatedProps {}

property calendarDefaultDate

calendarDefaultDate?: Date;

Calendar panel default presentation date and time

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property disabled

disabled?: boolean;

Whether disabled the component

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard

property format

format?: string;

Format date string

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property limitEndYear

limitEndYear?: number;

Set the upper limit of the available year relative to the current selection date

property limitStartYear

limitStartYear?: number;

Set the lower limit of the available year relative to the current selection date

property loading

loading?: boolean;

Whether to display a loading state indicator

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onChangeCalendarDate

onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the calendar panel date changes

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when clean

property oneTap

oneTap?: boolean;

One-click selection date

property onNextMonth

onNextMonth?: (date: Date) => void;

Called after the next month

property onOk

onOk?: (date: Date, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onPrevMonth

onPrevMonth?: (date: Date) => void;

Called after the prev month

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (
    range: DateOptionPreset<Date>,
    event: React.MouseEvent
) => void;

Called after clicking the shortcut button

property onToggleMonthDropdown

onToggleMonthDropdown?: (toggle: boolean) => void;

Called when opening the month view

property onToggleTimeDropdown

onToggleTimeDropdown?: (toggle: boolean) => void;

Called when opening the time view

property plaintext

plaintext?: boolean;

Whether plaintext the component

property ranges

ranges?: DateOptionPreset<Date | null>[];

Predefined date Ranges

property readOnly

readOnly?: boolean;

Whether read only the component

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom rendering calendar cell content.
5.54.0

property renderValue

renderValue?: (value: Date, format: string) => string;

Custom rendering of the selected date.

property shouldDisableDate

shouldDisableDate?: (date: Date) => boolean;

Whether a date on the calendar view should be disabled
Returns
date should be disabled (not selectable)

property shouldDisableHour

shouldDisableHour?: (hour: number, date: Date) => boolean;

Disabled hours on the time view

property shouldDisableMinute

shouldDisableMinute?: (minute: number, date: Date) => boolean;

Disabled minutes on the time view

property shouldDisableSecond

shouldDisableSecond?: (second: number, date: Date) => boolean;

Disabled seconds on the time view

property showMeridian

showMeridian?: boolean;

Deprecated
Use showMeridiem instead

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

property showWeekNumbers

showWeekNumbers?: boolean;

Whether to show week numbers

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface DateRangeInputProps

interface DateRangeInputProps
    extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>,
        FormControlBaseProps<ValueType> {}

property character

character?: string;

The character between the start and end dates. ' ~ '

property format

format?: string;

Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
See Also
- https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 'yyyy-MM-dd'

property placeholder

placeholder?: string;

The placeholder prop defines the text displayed in a form control when the control has no value.

interface DateRangePickerProps

interface DateRangePickerProps
    extends PickerBaseProps<DateRangePickerLocale>,
        FormControlBaseProps<DateRange | null> {}

property calendarSnapping

calendarSnapping?: boolean;

If the user selects a date on the right calendar first, it will automatically switch to the left calendar. Always keep the date on the left calendar as the start date. false 5.69.0

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property character

character?: string;

The character that separates two dates ' ~ '

property defaultCalendarValue

defaultCalendarValue?: DateRange;

Set default date for calendar

property disabledDate

disabledDate?: DisabledDateFunction;

Disabled date
Deprecated
Use shouldDisableDate instead

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard. true

property format

format?: string;

Format of the date displayed in the input box

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property hoverRange

hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);

The date range that will be selected when you click on the date

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property limitEndYear

limitEndYear?: number;

Set the upper limit of the available year relative to the current selection date.
1000

property limitStartYear

limitStartYear?: number;

Set the lower limit of the available year relative to the current selection date

property loading

loading?: boolean;

Whether to display a loading state indicator

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when the value is cleared

property oneTap

oneTap?: boolean;

Whether to click once on selected date range，Can be used with hoverRange

property onOk

onOk?: (date: DateRange, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (
    range: DateOptionPreset<DateRange>,
    event: React.MouseEvent
) => void;

Called after clicking the shortcut button

property ranges

ranges?: DateOptionPreset<DateRange | null>[];

Predefined date ranges

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom rendering calendar cell content.
5.77.0

property renderTitle

renderTitle?: (date: Date, calendarKey: 'start' | 'end') => React.ReactNode;

Custom render for calendar title
- calendarKey is added in v5.83.0

property renderValue

renderValue?: (value: DateRange, format: string) => string;

Custom rendering of the selected date range.

property shouldDisableDate

shouldDisableDate?: DisabledDateFunction;

Whether a date cell is disabled

property shouldDisableHour

shouldDisableHour?: (hour: number, date: Date) => boolean;

Disabled hours on the time view

property shouldDisableMinute

shouldDisableMinute?: (minute: number, date: Date) => boolean;

Disabled minutes on the time view

property shouldDisableSecond

shouldDisableSecond?: (second: number, date: Date) => boolean;

Disabled seconds on the time view

property showHeader

showHeader?: boolean;

Whether to display the formatted date range at the header of the calendar true 5.52.0

property showMeridian

showMeridian?: boolean;

Deprecated
Use showMeridiem instead

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

property showOneCalendar

showOneCalendar?: boolean;

Show only one calendar select

property showWeekNumbers

showWeekNumbers?: boolean;

to show week numbers

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface DividerProps

interface DividerProps extends BoxProps {}

property appearance

appearance?: 'solid' | 'dashed' | 'dotted';

The appearance of the divider.

property color

color?: Color | React.CSSProperties['color'];

The color of the divider.

property label

label?: React.ReactNode;

The content of the label.

property labelPlacement

labelPlacement?: 'start' | 'center' | 'end';

The placement of the label. 6.0.0

property size

size?: Size | number | string;

The size of the divider.

property spacing

spacing?: Size | number | string;

The spacing between the divider and its content.

property vertical

vertical?: boolean;

Vertical dividing line. Cannot be used with label.

interface DrawerProps

interface DrawerProps extends Omit<ModalProps, 'overflow'> {}

property closeButton

closeButton?: React.ReactNode | boolean;

Custom close button

property placement

placement?: PlacementCardinal;

The placement of Drawer

interface DropdownMenuItemProps

interface DropdownMenuItemProps<T = any>
    extends BoxProps,
        DeprecatedDropdownMenuItemProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Active the current option

property description

description?: React.ReactNode;

The description of the current option

property disabled

disabled?: boolean;

Disable the current option

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property panel

panel?: boolean;

Displays a custom panel

property shortcut

shortcut?: React.ReactNode;

The dropdown item keyboard shortcut.
5.58.0

property submenu

submenu?: React.ReactElement;

The submenu that this menuitem controls (if exists)

interface DropdownMenuProps

interface DropdownMenuProps<T = string | number> extends StandardProps {}

property active

active?: boolean;

Set the active state of the dropdown menu

property activeKey

activeKey?: T;

Set the active key for the dropdown menu

property disabled

disabled?: boolean;

Disable the dropdown menu

property eventKey

eventKey?: T;

Only used for setting the default expand state when it's a submenu

property icon

icon?: React.ReactElement<IconProps>;

Set the icon for the dropdown menu

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Callback function when an item is selected

property onToggle

onToggle?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Callback function when the dropdown menu is toggled

property title

title?: React.ReactNode;

Define the title as a submenu

property trigger

trigger?: 'hover' | 'click';

Define the trigger action for the dropdown menu

interface DropdownProps

interface DropdownProps<T = any>
    extends WithAsProps,
        DeprecatedDropdownProps,
        SanitizedHTMListProps {}

property activeKey

activeKey?: T;

The active option, corresponding to the eventKey in Dropdown.Item

property defaultOpen

defaultOpen?: boolean;

Default open state

property disabled

disabled?: boolean;

Whether to disable the component

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set icon

property menuStyle

menuStyle?: React.CSSProperties;

Menu style

property noCaret

noCaret?: boolean;

Do not display caret

property onClose

onClose?: () => void;

Callback function for closing the menu

property onOpen

onOpen?: () => void;

Callback function for opening the menu

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Selection callback function

property onToggle

onToggle?: (open?: boolean) => void;

Callback function for menu state toggle

property open

open?: boolean;

Controlled open state

property placement

placement?: PlacementCorners;

Menu position

property renderToggle

renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

Custom toggle component

property title

title?: React.ReactNode;

Define the title of the submenu

property toggleAs

toggleAs?: React.ElementType;

Custom element type can be used for this toggle component

property toggleClassName

toggleClassName?: string;

Toggle component class name

property trigger

trigger?: DropdownTrigger | DropdownTrigger[];

Trigger event

interface DropdownSeparatorProps

interface DropdownSeparatorProps
    extends WithAsProps,
        React.HTMLAttributes<HTMLElement> {}

property as

as?: React.ElementType;

You can use a custom element for this component

interface DropdownToggleProps

interface DropdownToggleProps extends WithAsProps {}

property icon

icon?: React.ReactElement<IconProps>;

property noCaret

noCaret?: boolean;

property placement

placement?: PlacementCorners;

property renderToggle

renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

interface FileType

interface FileType {}

property blobFile

blobFile?: File;

https://developer.mozilla.org/zh-CN/docs/Web/API/File

property fileKey

fileKey?: number | string;

File unique identifier

property name

name?: string;

File Name

property progress

progress?: number;

File upload status

property status

status?: 'inited' | 'uploading' | 'error' | 'finished';

File upload status

property url

url?: string;

The url of the file can be previewed.

interface FlexboxGridItemProps

interface FlexboxGridItemProps extends WithAsProps {}

property colspan

colspan?: number;

The number of columns the item should span
Deprecated
Please use <Col span={...}> instead.

property order

order?: number;

The order of the item in the grid
Deprecated
Please use <Col order={...}> instead.

interface FlexboxGridProps

interface FlexboxGridProps extends WithAsProps {}

property align

align?: 'top' | 'middle' | 'bottom';

Vertical alignment
Deprecated
Please use <Row align={...}> instead.

property justify

justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';

Horizontal alignment
Deprecated
Please use <Row justify={...}> instead.

interface FormControlComponent

interface FormControlComponent extends React.FC<FormControlProps> {}

call signature

<Accepter extends React.ElementType = typeof Input>(
    props: FormControlProps & {
        accepter?: Accepter;
    } & React.ComponentPropsWithRef<Accepter>
): React.ReactElement | null;

interface FormControlLabelProps

interface FormControlLabelProps
    extends BoxProps,
        Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'> {}

property htmlFor

htmlFor?: string;

Attribute of the html label tag, defaults to the controlId of the FormGroup

interface FormControlProps

interface FormControlProps<ValueType = any>
    extends BoxProps,
        Omit<
            React.HTMLAttributes<HTMLFormElement>,
            'value' | 'onChange' | 'color'
        > {}

property accepter

accepter?: React.ElementType;

Proxied components

property checkAsync

checkAsync?: boolean;

Asynchronous check value

property checkTrigger

checkTrigger?: CheckTriggerType;

The data validation trigger type, and it wiill overrides the setting on

property disabled

disabled?: boolean;

Disable the form control.

property errorMessage

errorMessage?: React.ReactNode;

Show error messages

property errorPlacement

errorPlacement?: ErrorMessagePlacement;

The placement of error messages

property name

name: string;

The name of form-control, support nested path. such as address.city. The path will be used to get and set form values.
Example 1
<Form formValue={{ address: { city: 'Shanghai' } }}> <FormControl name="address.city" /> </Form>

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property rule

rule?: CheckType<unknown, any>;

Validation rule

property shouldResetWithUnmount

shouldResetWithUnmount?: boolean;

Remove field value and error message when component is unmounted

property value

value?: ValueType;

The current value (controlled)

method onChange

onChange: (value: ValueType, event: React.SyntheticEvent) => void;

Callback fired when data changing

interface FormErrorMessageProps

interface FormErrorMessageProps extends BoxProps {}

property placement

placement?: ErrorMessagePlacement;

The placement of error messages

property show

show?: boolean;

Show error messages

interface FormGroupProps

interface FormGroupProps extends BoxProps {}

property controlId

controlId?: string;

Sets id on <Form.Control> and htmlFor on <Form.ControlLabel>. And generate ʻaria-labelledby and ʻaria-describedby for <Form.Control>.

interface FormHelpTextProps

interface FormHelpTextProps
    extends BoxProps,
        Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {}

property tooltip

tooltip?: boolean;

Whether to show through the Tooltip component

interface FormInstance

interface FormInstance<
    T = Record<string, any>,
    M = string,
    E = {
        [P in keyof T]?: M;
    }
> extends FormImperativeMethods<T, M, E> {}

property root

root: HTMLFormElement | null;

Form root element

interface FormProps

interface FormProps<
    V = Record<string, any>,
    M = any,
    E = {
        [P in keyof V]?: M;
    }
> extends WithAsProps,
        Omit<
            FormHTMLAttributes<HTMLFormElement>,
            'onChange' | 'onSubmit' | 'onError' | 'onReset'
        > {}

property checkTrigger

checkTrigger?: CheckTriggerType;

Trigger the type of form validation.
'change'

property disabled

disabled?: boolean;

Disable the form

property errorFromContext

errorFromContext?: boolean;

The error message comes from context

property fluid

fluid?: boolean;

The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts.

property formDefaultValue

formDefaultValue?: V | null;

Initial value

property formError

formError?: E | null;

Error message of form

property formValue

formValue?: V | null;

Current value of the input. Creates a controlled component

property layout

layout?: 'horizontal' | 'vertical' | 'inline';

Set the left and right columns of the layout of the elements within the form。
'vertical'

property model

model?: Schema;

SchemaModel object
See Also
- https://github.com/rsuite/schema-typed

property nestedField

nestedField?: boolean;

The form data is nested. You may now nest fields with "dot syntax" (e.g. address.city).

false v5.51.0

Example 1

<Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
 <FormControl name="address.city" />
</Form>

property onChange

onChange?: (formValue: V, event?: React.SyntheticEvent) => void;

Callback fired when data changing

property onCheck

onCheck?: (formError: E) => void;

Callback fired when data cheking

property onError

onError?: (formError: E) => void;

Callback fired when error checking

property onReset

onReset?: (
    formValue: V | null,
    event?: React.FormEvent<HTMLFormElement>
) => void;

Callback fired when form reset

property onSubmit

onSubmit?: (
    formValue: V | null,
    event?: React.FormEvent<HTMLFormElement>
) => void;

Callback fired when form submit，only when the form data is validated will trigger

property plaintext

plaintext?: boolean;

Render the form as plain text

property readOnly

readOnly?: boolean;

Make the form readonly

interface FormStackProps

interface FormStackProps extends BoxProps {}

property fluid

fluid?: boolean;

The fluid property allows the form elements to fill 100% of the container width. Only valid in vertical layouts.

property layout

layout?: 'horizontal' | 'vertical' | 'inline';

Set the layout of the elements within the form. 'horizontal': Left and right columns layout. 'vertical': Top and bottom layout. 'inline': Elements are placed inline.

interface GridProps

interface GridProps extends BoxProps {}

property fluid

fluid?: boolean;

Whether the grid container should have a fluid width

interface HeadingProps

interface HeadingProps extends BoxProps {}

property level

level?: 1 | 2 | 3 | 4 | 5 | 6;

Sets heading level, h1 through h6. 3

interface HighlightProps

interface HighlightProps extends BoxProps {}

property query

query?: string | string[];

property renderMark

renderMark?: (match: string, index: number) => React.ReactNode;

interface HStackProps

interface HStackProps extends Omit<StackProps, 'direction'> {}

property reverse

reverse?: boolean;

Reverse the order of the children in the stack

interface IconButtonProps

interface IconButtonProps extends ButtonProps {}

property circle

circle?: boolean;

Set circle button

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property placement

placement?: 'left' | 'right' | 'start' | 'end';

The placement of icon

interface ImageProps

interface ImageProps
    extends Omit<BoxProps, 'rounded' | 'color' | 'height' | 'width' | 'position'>,
        Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {}

property bordered

bordered?: boolean;

An image may appear with border.

property circle

circle?: boolean;

An image may appear circular.

property fallbackSrc

fallbackSrc?: string;

The fallback image when the src fails to load.

property fit

fit?: CSSProperties['objectFit'];

It maps to css object-fit property.

property placeholder

placeholder?: React.ReactNode;

The placeholder to display when the image is loading.

property position

position?: CSSProperties['objectPosition'];

It maps to css object-position property.

property rounded

rounded?: boolean;

An image may appear rounded.

property shaded

shaded?: boolean;

Whether there is a shadow.

property zoomed

zoomed?: boolean;

Whether the image should be zoomed when hovered.

interface InlineEditProps

interface InlineEditProps extends Omit<BoxProps, 'children'> {}

property children

children?:
    | ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement)
    | React.ReactElement;

The render function of the InlineEdit.

property defaultValue

defaultValue?: any;

The initial value of the InlineEdit when it is not controlled.

property disabled

disabled?: boolean;

If true, the InlineEdit will be disabled.

property onCancel

onCancel?: (event?: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is canceled.

property onChange

onChange?: (value: any, event: React.ChangeEvent) => void;

The callback function that is called when the value of the InlineEdit is changed.

property onEdit

onEdit?: (event: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is clicked.

property onSave

onSave?: (event?: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is saved.

property placeholder

placeholder?: string;

The placeholder of the InlineEdit.

property showControls

showControls?: boolean;

show the control buttons when editing. true

property size

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

The size of the InlineEdit.

property stateOnBlur

stateOnBlur?: 'save' | 'cancel';

The state of the InlineEdit when it is blurred.

property value

value?: any;

The value of the InlineEdit.

interface InputGroupAddonProps

interface InputGroupAddonProps
    extends BaseBoxProps,
        React.HTMLAttributes<HTMLSpanElement> {}

property disabled

disabled?: boolean;

An Input group addon can show that it is disabled

interface InputGroupProps

interface InputGroupProps extends BoxProps {}

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

An Input group can show that it is disabled

property inside

inside?: boolean;

Sets the composition content internally

property size

size?: Size;

A component can have different sizes

interface InputNumberProps

interface NumberInputProps<T = number | string | null>
    extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>,
        Omit<BoxProps, 'height' | 'width'>,
        FormControlBaseProps<T> {}

property buttonAppearance

buttonAppearance?: AppearanceType;

Button can have different appearances

property controls

controls?: boolean | ((trigger: 'up' | 'down') => React.ReactNode);

Show or hide control icons: - true (default): show default up/down buttons. - false: hide controls. - (trigger) => ReactNode: fully custom control per trigger ('up' | 'down').

property decimalSeparator

decimalSeparator?: string;

Decimal separator https://en.wikipedia.org/wiki/Decimal_separator
'.' 5.69.0

property disabled

disabled?: boolean;

An input can show that it is disabled

property formatter

formatter?: (value: number | string) => string;

Format the value of the input

property max

max?: number;

Maximum value

property min

min?: number;

Minimum value

property onWheel

onWheel?: (event: React.WheelEvent) => void;

Callback function when wheel event is triggered

property postfix

postfix?: React.ReactNode;

Sets the element displayed on the right side of the component
Deprecated
Use suffix instead.

property prefix

prefix?: React.ReactNode;

Sets the element displayed to the left of the component

property scrollable

scrollable?: boolean;

Whether the value can be changed through the wheel event

property size

size?: BasicSize;

An Input can have different sizes

property step

step?: number;

The value of each step. can be decimal

property suffix

suffix?: React.ReactNode;

Sets the element displayed on the right side of the component

interface InputPickerProps

interface InputPickerProps<V = ValueType>
    extends FormControlPickerProps<V, InputPickerLocale, InputOption>,
        Omit<SelectProps<V>, 'renderValue'>,
        Pick<PickerToggleProps, 'caretAs' | 'loading' | 'label'> {}

property cacheData

cacheData?: InputOption<V>[];

Option to cache value when searching asynchronously

property creatable

creatable?: boolean;

Settings can create new options

property onBlur

onBlur?: React.FocusEventHandler;

The onBlur attribute for the input element.

property onCreate

onCreate?: (value: V, item: Option, event: React.SyntheticEvent) => void;

Called when the option is created

property onFocus

onFocus?: React.FocusEventHandler;

The onFocus attribute for the input element.

property renderValue

renderValue?: (
    value: V,
    item: Option<V>,
    selectedElement: React.ReactNode
) => React.ReactNode;

property shouldDisplayCreateOption

shouldDisplayCreateOption?: (
    searchKeyword: string,
    filteredData: InputOption<V>[]
) => boolean;

Customize whether to display "Create option" action with given textbox value
By default, InputPicker hides "Create option" action when textbox value matches any filtered item's [valueKey] property
Parameter searchKeyword
Value of the textbox
Parameter filteredData
The items filtered by the searchKeyword

property tabIndex

tabIndex?: number;

interface InputProps

interface InputProps
    extends InputBaseCommonProps,
        SanitizedInputProps,
        PropsWithoutChange<FormControlBaseProps> {}

property htmlSize

htmlSize?: number;

The htmlSize attribute defines the width of the element.
See Also
- MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size 5.49.0

property onChange

onChange?: PrependParameters<
    React.ChangeEventHandler<HTMLInputElement>,
    [value: string]
>;

The callback function in which value is changed.

property onPressEnter

onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;

Called on press enter

property type

type?: string;

The HTML input type

interface KbdProps

interface KbdProps extends BoxProps {}

property size

size?: Size;

Sets Kbd size.

interface LinkProps

interface LinkProps extends SafeAnchorProps {}

property anchorIcon

anchorIcon?: React.ReactNode;

The icon to be displayed after the link

property external

external?: boolean;

Whether the link is external

property showAnchorIcon

showAnchorIcon?: boolean;

Whether to show the anchor icon

property underline

underline?: 'always' | 'hover' | 'not-hover' | 'never';

Determines in which cases link should have text-decoration: underline styles, hover by default

interface ListItemProps

interface ListItemProps extends BaseBoxProps, React.HTMLAttributes<HTMLElement> {}

property collection

collection?: Collection;

property disabled

disabled?: boolean;

property index

index?: number;

property size

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

interface ListProps

interface ListProps extends Omit<BoxProps, 'transitionDuration'>, SortConfig {}

property bordered

bordered?: boolean;

Whether the list is bordered.

property divider

divider?: boolean;

Whether to display a divider between items.
5.75.0

property hover

hover?: boolean;

Whether the list is hoverable.

property size

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

Size of list item.

property sortable

sortable?: boolean;

Whether the list is sortable.

interface LoaderProps

interface LoaderProps extends BoxProps {}

property backdrop

backdrop?: boolean;

Whether the background is displayed

property center

center?: boolean;

Centered in the container

property content

content?: React.ReactNode;

Custom descriptive text

property inverse

inverse?: boolean;

An alternative dark visual style for the Loader

property size

size?: Size;

A loader can have different sizes

property speed

speed?: 'normal' | 'fast' | 'slow' | 'paused';

The speed at which the loader rotates

property vertical

vertical?: boolean;

The icon is displayed vertically with the text

interface MenuItemProps

interface MenuItemProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {}

property active

active?: boolean;

Active the current option

property description

description?: React.ReactNode;

The description of the current option

property disabled

disabled?: boolean;

Disable the current option

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property shortcut

shortcut?: React.ReactNode;

The menu item keyboard shortcut.

interface MenuProps

interface MenuProps<T = string | number>
    extends BoxProps,
        HTMLPropsWithoutSelect<HTMLUListElement> {}

property activeKey

activeKey?: T;

Set the active key for the menu

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Callback function triggered when an item is selected

interface MenuSeparatorProps

interface MenuSeparatorProps
    extends BaseBoxProps,
        React.HTMLAttributes<HTMLElement> {}

property as

as?: React.ElementType;

You can use a custom element for this component

interface MessageProps

interface MessageProps extends BoxProps {}

property bordered

bordered?: boolean;

Show a border around the message box. 5.53.0

property centered

centered?: boolean;

Center the message vertically. 5.53.0

property closable

closable?: boolean;

Whether it is possible to close the message box

property duration

duration?: number;

Delay automatic removal of messages. When set to 0, the message is not automatically removed. (Unit: milliseconds)
2000
Deprecated
Use toaster.push(<Message />, { duration: 2000 }) instead.

property full

full?: boolean;

Fill the container

property header

header?: React.ReactNode;

The title of the message

property onClose

onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;

Callback after the message is removed

property showIcon

showIcon?: boolean;

Whether to display an icon

property type

type?: StatusType;

The type of the message box.

interface ModalDialogProps

interface ModalDialogProps extends BoxProps {}

property dialogClassName

dialogClassName?: string;

property dialogStyle

dialogStyle?: React.CSSProperties;

property size

size?: Size;

A modal can have different sizes

interface ModalHeaderProps

interface ModalHeaderProps extends BoxProps {}

property children

children?: React.ReactNode;

Primary content

property closeButton

closeButton?: boolean;

Display close button

property onClose

onClose?: (event: React.MouseEvent) => void;

Called when Modal is hidden

interface ModalProps

interface ModalProps
    extends BaseModalProps,
        Pick<
            React.HTMLAttributes<HTMLElement>,
            'role' | 'id' | 'aria-labelledby' | 'aria-describedby'
        > {}

property animation

animation?: React.ElementType;

Set an animation effect for Modal, the default is Bounce.

property animationTimeout

animationTimeout?: number;

Set the duration of the animation

property bodyFill

bodyFill?: boolean;

Remove default padding from the dialog and body so the content can occupy the full height. Useful for creating custom layouts with full-width/height content like split panels or image galleries.

property centered

centered?: boolean;

Set the centered position of the modal

property closeButton

closeButton?: React.ReactNode | boolean;

Custom close button, used when rendered as a Drawer

property dialogAs

dialogAs?: React.ElementType;

You can use a custom element type for Dialog

property dialogClassName

dialogClassName?: string;

CSS class applied to Dialog DOM nodes

property dialogStyle

dialogStyle?: React.CSSProperties;

CSS style applied to dialog DOM nodes

property full

full?: boolean;

Full screen
Deprecated
Use size="full" instead.

property isDrawer

isDrawer?: boolean;

Indicates if the component should be displayed as a drawer

property overflow

overflow?: boolean;

Automatically sets the height when the body content is too long.

property size

size?: ModalSize;

A modal can have different sizes

interface MultiCascaderProps

interface MultiCascaderProps<T = any>
    extends FormControlPickerProps<T[], PickerLocale, Option<T>, T>,
        MultiCascadeTreeProps<T, T[], PickerLocale>,
        DeprecatedProps,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property onClean

onClean?: (event: React.SyntheticEvent) => void;

Called when clean

property renderValue

renderValue?: (
    value: T[],
    selectedItems: Option<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface MultiCascadeTreeProps

interface MultiCascadeTreeProps<T = any, V = T[], L = any>
    extends CascadeTreeProps<T, V> {}

property cascade

cascade?: boolean;

When set to true, selecting a child node will update the state of the parent node.

property disabledItemValues

disabledItemValues?: ToArray<NonNullable<T>>;

Disabled items

property locale

locale?: Partial<L>;

A collection of localized strings.

property onCheck

onCheck?: (
    value: T[],
    node: Option<T>,
    checked: boolean,
    event: React.SyntheticEvent
) => void;

Called after the checkbox state changes.

property uncheckableItemValues

uncheckableItemValues?: T[];

Set the option value for the check box not to be rendered

interface NavbarContentProps

interface NavbarContentProps extends Omit<BoxProps, 'children'> {}

property children

children?: React.ReactNode | (({ onClose }: ChildProps) => React.ReactNode);

interface NavbarDropdownItemProps

interface NavbarDropdownItemProps<T = any>
    extends BoxProps,
        DeprecatedDropdownItemProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Active the current option

property disabled

disabled?: boolean;

Disable the current option

property divider

divider?: boolean;

Whether to display the divider

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property panel

panel?: boolean;

Displays a custom panel

property submenu

submenu?: React.ReactElement;

The submenu that this menuitem controls (if exists)

interface NavbarDropdownMenuProps

interface NavbarDropdownMenuProps<T = any>
    extends StandardProps,
        DeprecatedDropdownMenuProps {}

property active

active?: boolean;

Whether the dropdown menu is active

property activeKey

activeKey?: T;

The currently active key in the dropdown menu

property collapsible

collapsible?: boolean;

Whether the dropdown menu is collapsible

property disabled

disabled?: boolean;

Whether the dropdown menu is disabled

property eventKey

eventKey?: T;

Only used for setting the default expand state when it's a submenu.

property expanded

expanded?: boolean;

Whether the dropdown menu is expanded

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onToggle

onToggle?: (
    open: boolean,
    eventKey?: T | undefined,
    event?: React.SyntheticEvent
) => void;

Callback function when toggling the dropdown menu
Parameter open
Whether the menu is open
Parameter eventKey
The eventKey of the menu item
Parameter event
The event object

property open

open?: boolean;

Whether the dropdown menu is open

property openDirection

openDirection?: 'start' | 'end';

Direction that the sub-menu open towards - start: towards the head of the reading direction (right by default, left in RTL) - end: towards the end of the reading direction (left by default, right in RTL)
'end'

property title

title?: React.ReactNode;

Define the title as a submenu

interface NavbarDropdownProps

interface NavbarDropdownProps<T = any>
    extends BoxProps,
        Omit<
            React.HTMLAttributes<HTMLElement>,
            'onSelect' | 'onToggle' | 'title' | 'color'
        > {}

property disabled

disabled?: boolean;

Whether or not component is disabled

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property menuStyle

menuStyle?: React.CSSProperties;

The style of the menu

property noCaret

noCaret?: boolean;

No caret variation

property onClose

onClose?: () => void;

The callback function that the menu closes

property onOpen

onOpen?: () => void;

Menu Pop-up callback function

property onToggle

onToggle?: (
    open: boolean,
    eventKey?: T | undefined,
    event?: React.SyntheticEvent
) => void;

Callback function for menu state switching

property open

open?: boolean;

Open the menu and control it
Deprecated

property placement

placement?: PlacementCorners;

The placement of Menu

property renderTitle

renderTitle?: (children: React.ReactNode) => React.ReactNode;

Deprecated

property renderToggle

renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

Custom Toggle

property title

title?: React.ReactNode;

Define the title as a submenu

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element type for this toggle component

property toggleClassName

toggleClassName?: string;

A css class to apply to the Toggle DOM node

property trigger

trigger?: NavbarDropdownTrigger | readonly NavbarDropdownTrigger[];

Triggering events

interface NavbarDropdownToggleProps

interface NavbarDropdownToggleProps extends BoxProps {}

property noCaret

noCaret?: boolean;

property placement

placement?: PlacementCorners;

property renderToggle

renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;

interface NavbarItemProps

interface NavbarItemProps<T = string | number>
    extends BoxProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Activation status

property disabled

disabled?: boolean;

Disabled status

property eventKey

eventKey?: T;

The value of the current option

property href

href?: string;

Providing a href will render an <a> element

property icon

icon?: React.ReactElement<IconProps>;

Sets the icon for the component

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Select the callback function that the event triggers.

interface NavbarProps

interface NavbarProps extends BoxProps {}

property appearance

appearance?: 'default' | 'inverse' | 'subtle';

The appearance style of the Navbar component.

property drawerOpen

drawerOpen?: boolean;

The open state of the drawer.

property onDrawerOpenChange

onDrawerOpenChange?: (open: boolean) => void;

Callback when the drawer is opened or closed.

interface NavbarToggleProps

interface NavbarToggleProps extends Omit<BurgerProps, 'onToggle'> {}

property onToggle

onToggle?: (open: boolean) => void;

Callback function that is called when the toggle is clicked.

interface NavDropdownItemProps

interface NavDropdownItemProps<T = any>
    extends BoxProps,
        DeprecatedDropdownItemProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Active the current option

property disabled

disabled?: boolean;

Disable the current option

property divider

divider?: boolean;

Whether to display the divider

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property panel

panel?: boolean;

Displays a custom panel

interface NavDropdownMenuProps

interface NavDropdownMenuProps<T = any>
    extends StandardProps,
        DeprecatedDropdownMenuProps {}

property active

active?: boolean;

Whether the dropdown menu is active

property collapsible

collapsible?: boolean;

Whether the dropdown menu is collapsible

property disabled

disabled?: boolean;

Whether the dropdown menu is disabled

property eventKey

eventKey?: T;

Only used for setting the default expand state when it's a submenu.

property expanded

expanded?: boolean;

Whether the dropdown menu is expanded

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property noCaret

noCaret?: boolean;

No caret variation

property onToggle

onToggle?: (
    open: boolean,
    eventKey?: T | undefined,
    event?: React.SyntheticEvent
) => void;

Callback function that is triggered when the dropdown menu is toggled
Parameter open
Whether the dropdown menu is open
Parameter eventKey
The eventKey of the dropdown menu
Parameter event
The event object

property open

open?: boolean;

Whether the dropdown menu is open

property openDirection

openDirection?: 'start' | 'end';

Direction that the sub-menu open towards - start: towards the head of the reading direction (right by default, left in RTL) - end: towards the end of the reading direction (left by default, right in RTL)
'end'

property title

title?: React.ReactNode;

Define the title as a submenu

interface NavDropdownProps

interface NavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {}

property disabled

disabled?: boolean;

Whether or not component is disabled

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: NavDropdownToggleProps['icon'];

Set the icon

property menuStyle

menuStyle?: React.CSSProperties;

The style of the menu

property noCaret

noCaret?: NavDropdownToggleProps['noCaret'];

No caret variation

property onClose

onClose?: () => void;

The callback function that the menu closes

property onOpen

onOpen?: () => void;

Menu Pop-up callback function

property onToggle

onToggle?: (
    open: boolean,
    eventKey?: T | undefined,
    event?: React.SyntheticEvent
) => void;

Callback function for menu state switching

property open

open?: boolean;

Open the menu and control it
Deprecated

property placement

placement?: PlacementCorners;

The placement of Menu

property renderTitle

renderTitle?: (children: React.ReactNode) => React.ReactNode;

Deprecated

property renderToggle

renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;

Custom Toggle

property title

title?: React.ReactNode;

Define the title as a submenu

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element type for this toggle component

property toggleClassName

toggleClassName?: string;

A css class to apply to the Toggle DOM node

property trigger

trigger?: NavDropdownTrigger | readonly NavDropdownTrigger[];

Triggering events

interface NavDropdownToggleProps

interface NavDropdownToggleProps extends BoxProps {}

property icon

icon?: NavItemProps['icon'];

property noCaret

noCaret?: boolean;

property placement

placement?: PlacementCorners;

property renderToggle

renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;

interface NavItemProps

interface NavItemProps<T = string | number>
    extends BaseBoxProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Activation status

property disabled

disabled?: boolean;

Disabled status

property divider

divider?: boolean;

divier for nav item

property eventKey

eventKey?: T;

The value of the current option

property href

href?: string;

Providing a href will render an <a> element

property icon

icon?: React.ReactElement<IconProps>;

Sets the icon for the component

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Select the callback function that the event triggers.

property panel

panel?: boolean;

display panel

interface NavMenuProps

interface NavMenuProps
    extends NavDropdownProps,
        Omit<NavDropdownMenuProps, 'onToggle'> {}

interface NavProps

interface NavProps<T = any> extends BaseBoxProps, HTMLPropsWithoutSelect {}

property activeKey

activeKey?: T;

The active key of the Nav component.

property appearance

appearance?: 'default' | 'subtle' | 'tabs';

The appearance style of the Nav component. - 'pills' appearance is deprecated. Use SegmentedControl component instead. 'default'

property defaultActiveKey

defaultActiveKey?: T;

The default active key of the Nav component.

property justified

justified?: boolean;

Whether the Nav component is justified.

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Event handler for selecting a Nav item.

property pullRight

pullRight?: boolean;

Whether the Nav component is pulled to the right.
Deprecated
Use Navbar.Content instead.

property reversed

reversed?: boolean;

Whether the Nav component is reversed.

property vertical

vertical?: boolean;

Whether the Nav component is vertical.

interface NotificationProps

interface NotificationProps extends Omit<BoxProps, 'children'> {}

property children

children?: React.ReactNode | (() => React.ReactNode);

property closable

closable?: boolean;

The remove button is displayed.

header?: React.ReactNode;

Title of the message

property onClose

onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;

Callback after the message is removed

property type

type?: StatusType;

Type of message

interface NumberInputProps

interface NumberInputProps<T = number | string | null>
    extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>,
        Omit<BoxProps, 'height' | 'width'>,
        FormControlBaseProps<T> {}

property buttonAppearance

buttonAppearance?: AppearanceType;

Button can have different appearances

property controls

controls?: boolean | ((trigger: 'up' | 'down') => React.ReactNode);

Show or hide control icons: - true (default): show default up/down buttons. - false: hide controls. - (trigger) => ReactNode: fully custom control per trigger ('up' | 'down').

property decimalSeparator

decimalSeparator?: string;

Decimal separator https://en.wikipedia.org/wiki/Decimal_separator
'.' 5.69.0

property disabled

disabled?: boolean;

An input can show that it is disabled

property formatter

formatter?: (value: number | string) => string;

Format the value of the input

property max

max?: number;

Maximum value

property min

min?: number;

Minimum value

property onWheel

onWheel?: (event: React.WheelEvent) => void;

Callback function when wheel event is triggered

property postfix

postfix?: React.ReactNode;

Sets the element displayed on the right side of the component
Deprecated
Use suffix instead.

property prefix

prefix?: React.ReactNode;

Sets the element displayed to the left of the component

property scrollable

scrollable?: boolean;

Whether the value can be changed through the wheel event

property size

size?: BasicSize;

An Input can have different sizes

property step

step?: number;

The value of each step. can be decimal

property suffix

suffix?: React.ReactNode;

Sets the element displayed on the right side of the component

interface Option

interface Option<T = number | string> extends Record<string, any> {}

property children

children?: Option<T>[];

property groupBy

groupBy?: string;

property label

label?: string | ReactNode;

property loading

loading?: boolean;

property parent

parent?: Option<T>;

property value

value?: T;

interface PaginationProps

interface PaginationGroupProps extends PaginationProps {}

property layout

layout?: LayoutType[];

Customize the layout of a paging component. - total Component used to display the total. - pager Component used to display the page number. - limit Component used to display the number of rows per page. - skip Component used to jump to a page. - - Placeholder, take up the remaining space. - | Divider
['pager']

property limit

limit?: number;

Customize the layout of a paging component.

property limitOptions

limitOptions?: number[];

Customizes the options of the rows per page select field.

property onChangeLimit

onChangeLimit?: (limit: number) => void;

Callback fired when the number of rows per page is changed.

property onChangePage

onChangePage?: (page: number) => void;

Callback fired when the page is changed.

property total

total: number;

Total number of data entries.

interface PanelBodyProps

interface PanelBodyProps
    extends WithAsProps,
        AnimationEventProps,
        React.HTMLAttributes<HTMLDivElement> {}

property bodyFill

bodyFill?: boolean;

property collapsible

collapsible?: boolean;

property expanded

expanded?: boolean;

property id

id?: string;

property labelId

labelId?: string;

property role

role?: string;

property scrollShadow

scrollShadow?: boolean;

interface PanelGroupProps

interface PanelGroupProps<T = KeyType> extends BoxProps {}

property accordion

accordion?: boolean;

Whether it is a collapsible panel.

property activeKey

activeKey?: T;

Expand the Panel, corresponding to the 'Panel' of 'eventkey'

property bordered

bordered?: boolean;

Show border

property children

children?: React.ReactNode;

Primary content

property defaultActiveKey

defaultActiveKey?: T;

The default expansion panel.

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Toggles the callback function for the expand panel

interface PanelHeaderProps

interface PanelHeaderProps
    extends BoxProps,
        Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {}

property bodyId

bodyId?: string;

property buttonId

buttonId?: string;

property caretAs

caretAs?: React.ElementType;

property collapsible

collapsible?: boolean;

property disabled

disabled?: boolean;

property expanded

expanded?: boolean;

property onClickButton

onClickButton?: (event: React.MouseEvent) => void;

property role

role?: string;

interface PanelProps

interface PanelProps<T = string | number> extends BoxProps, AnimationEventProps {}

property bodyFill

bodyFill?: boolean;

Content area filled with containers

property bodyProps

bodyProps?: React.HTMLAttributes<HTMLDivElement>;

Custom body style

property bordered

bordered?: boolean;

Show border

property caretAs

caretAs?: React.ElementType;

The icon on the right side of the title

property collapsible

collapsible?: boolean;

Whether it is a collapsible panel

property defaultExpanded

defaultExpanded?: boolean;

Expand then panel by default

property disabled

disabled?: boolean;

Whether the panel is disabled

property eventKey

eventKey?: T;

The event key corresponding to the panel

property expanded

expanded?: boolean;

Expand then panel

header?: React.ReactNode;

The head displays information

property headerRole

headerRole?: string;

The role attribute of the header

property id

id?: string;

The id attribute of the panel

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Called when the panel is selected

property panelRole

panelRole?: string;

The role attribute of the panel

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

property shaded

shaded?: boolean;

Whether there is a shadow

interface PasswordInputProps

interface PasswordInputProps extends Omit<InputProps, 'type' | 'plaintext'> {}

property defaultVisible

defaultVisible?: boolean;

Default visibility state of the password

property endIcon

endIcon?: React.ReactNode;

The icon element to display after the input field

property onVisibleChange

onVisibleChange?: (visible: boolean) => void;

Callback function triggered when the password visibility changes

property renderVisibilityIcon

renderVisibilityIcon?: (visible: boolean) => React.ReactNode;

Custom icon for visibility toggle

property startIcon

startIcon?: React.ReactNode;

The icon element to display before the input field

property visible

visible?: boolean;

Controls whether the password is visible

interface PasswordStrengthMeterProps

interface PasswordStrengthMeterProps extends BoxProps {}

property label

label?: React.ReactNode;

Label to display below the strength meter

property level

level?: 0 | 1 | 2 | 3;

The strength level of the password (0-3)

property max

max?: number;

Maximum number of segments in the strength meter

interface PickerHandle

interface PickerHandle {}

property close

close?: () => void;

property list

list?: ListHandle;

property open

open?: () => void;

property overlay

overlay?: HTMLElement | null;

property root

root: HTMLElement | null;

property target

target?: HTMLElement | null;

property type

type?: typeof RSUITE_PICKER_TYPE;

property updatePosition

updatePosition?: () => void;

interface PinInputProps

interface PinInputProps extends BoxProps {}

property attached

attached?: boolean;

Whether input fields are attached (no gap between)

property autoFocus

autoFocus?: boolean;

Whether to auto-focus the first input on mount

property defaultValue

defaultValue?: string;

Default PIN value

property disabled

disabled?: boolean;

Whether to disable PIN input

property length

length?: number;

Number of PIN digits

property mask

mask?: boolean;

Whether to mask PIN input (like password)

property name

name?: string;

Name for form submission

property onChange

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

Callback function when PIN value changes

property onComplete

onComplete?: (value: string) => void;

Callback function when PIN input is completed

property otp

otp?: boolean;

Whether to optimize for one-time password (OTP) input

property placeholder

placeholder?: string;

Placeholder for input fields

property readOnly

readOnly?: boolean;

Whether the input is read-only

property size

size?: BasicSize;

Input size

property type

type?: 'number' | 'alphabetic' | 'alphanumeric' | RegExp;

Type of allowed input: number, alphabetic, alphanumeric, or custom regex

property value

value?: string;

PIN value

interface Placeholder

interface Placeholder
    extends InternalRefForwardingComponent<'div', PlaceholderParagraphProps> {}

property Graph

Graph: typeof PlaceholderGraph;

property Grid

Grid: typeof PlaceholderGrid;

property Paragraph

Paragraph: typeof PlaceholderParagraph;

interface PlaceholderGraphProps

interface PlaceholderGraphProps extends BoxProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property height

height?: number;

The height of the graph.
200

property width

width?: number;

The width of the graph.
100%

interface PlaceholderGridProps

interface PlaceholderGridProps extends BoxProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property columns

columns?: number;

The number of columns. 5

property rowHeight

rowHeight?: number;

The height of the row.
10

property rowMargin

rowMargin?: number;

Deprecated
Use rowSpacing instead.

property rows

rows?: number;

The number of rows.
5

property rowSpacing

rowSpacing?: number;

The spacing between rows.
20 5.59.1

interface PlaceholderParagraphProps

interface PlaceholderParagraphProps extends BoxProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property graph

graph?: boolean | 'circle' | 'square' | 'image';

The shape of the graph. false

property rowHeight

rowHeight?: number;

The height of the row. 10

property rowMargin

rowMargin?: number;

Deprecated
Use rowSpacing instead.

property rows

rows?: number;

The number of rows. 2

property rowSpacing

rowSpacing?: number;

The spacing between rows. 20 5.59.1

interface PopoverProps

interface PopoverProps extends BoxProps {}

property arrow

arrow?: boolean;

Whether show the arrow indicator

property full

full?: boolean;

The content full the container

property title

title?: React.ReactNode;

The title of the component.

property visible

visible?: boolean;

The component is visible by default.

interface Progress

interface Progress
    extends InternalRefForwardingComponent<'div', ProgressLineProps> {}

property Circle

Circle: typeof ProgressCircle;

property Line

Line: typeof ProgressLine;

interface ProgressCircleProps

interface ProgressCircleProps extends BoxProps {}

property gapDegree

gapDegree?: number;

Circular progress bar degree

property gapPosition

gapPosition?: 'top' | 'bottom' | 'left' | 'right';

Circular progress bar Notch position

property percent

percent?: number;

Percent of progress

property renderInfo

renderInfo?: (
    percent: number,
    status?: 'success' | 'fail' | 'active'
) => React.ReactNode;

Custom render function for info content

property sections

sections?: Pick<ProgressSection, 'percent' | 'color'>[];

Multiple sections with different colors

property showInfo

showInfo?: boolean;

Show text

property status

status?: 'success' | 'fail' | 'active';

Progress status

property strokeColor

strokeColor?: string;

Line color

property strokeLinecap

strokeLinecap?: 'butt' | 'round' | 'square';

The end of different types of open paths

property strokeWidth

strokeWidth?: number;

Line width

property trailColor

trailColor?: string;

Tail color

property trailWidth

trailWidth?: number;

Tail width

property width

width?: number;

Diameter of the circle

interface ProgressProps

interface ProgressLineProps extends BoxProps {}

property indeterminate

indeterminate?: boolean;

Whether to show indeterminate loading animation

property percent

percent?: number;

Percent of progress

property percentPlacement

percentPlacement?:
    | 'start'
    | 'end'
    | 'insideStart'
    | 'insideEnd'
    | 'insideCenter';

The placement of the percent info

property radius

radius?: number | string;

The radius of the progress bar

property renderInfo

renderInfo?: (
    percent: number,
    status?: 'success' | 'fail' | 'active'
) => React.ReactNode;

Custom render function for info content

property sections

sections?: ProgressSection[];

Multiple sections with different colors

property showInfo

showInfo?: boolean;

Show text

property status

status?: 'success' | 'fail' | 'active';

Progress status

property striped

striped?: boolean;

Whether to apply a striped effect to the progress bar

property strokeColor

strokeColor?: string;

Line color

property strokeWidth

strokeWidth?: number;

Line width

property trailColor

trailColor?: string;

Trail color

property trailWidth

trailWidth?: number;

Trail width

property vertical

vertical?: boolean;

The progress bar is displayed vertically

interface ProgressSection

interface ProgressSection {}

property color

color: string;

Color of this section

property label

label?: React.ReactNode;

Label of this section

property percent

percent: number;

Percent of this section

property tooltip

tooltip?: React.ReactNode;

Tooltip of this section

interface RadioGroupProps

interface RadioGroupProps<T = string | number>
    extends BoxProps,
        FormControlBaseProps<T> {}

property appearance

appearance?: 'default' | 'picker';

A radio group can have different appearances
Deprecated
Use <SegmentedControl indicator="underline" /> instead

property children

children?: React.ReactNode;

Primary content

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Name to use for form

interface RadioProps

interface RadioProps<T = string | number> extends BoxProps, HTMLPropsWithoutChange {}

property checked

checked?: boolean;

Specifies whether the radio is selected

property color

color?: Color;

The color of the radio when checked
5.56.0

property defaultChecked

defaultChecked?: boolean;

Specifies the initial state: whether or not the radio is selected

property disabled

disabled?: boolean;

The disable of component

property inline

inline?: boolean;

Inline layout.
Used in RadioGroup

property inputProps

inputProps?: React.HTMLAttributes<HTMLInputElement>;

Attributes applied to the input element

property inputRef

inputRef?: React.Ref<HTMLInputElement>;

Pass a ref to the input element

property name

name?: string;

Name to use for form

property onChange

onChange?: (
    value: T | undefined,
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Callback function with value changed

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property value

value?: T;

Value, corresponding to the value of the Radiogroup, to determine whether the

interface RadioTileGroupProps

interface RadioTileGroupProps<T = number | string>
    extends BoxProps,
        FormControlBaseProps<T> {}

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

Whether radio is disabled

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Name to use for form

interface RadioTileProps

interface RadioTileProps<T = string | number>
    extends BoxProps,
        HTMLPropsWithoutChange {}

property checked

checked?: boolean;

Specifies whether the radio is selected

property children

children?: React.ReactNode;

Additional description, if needed

property defaultChecked

defaultChecked?: boolean;

Specifies the initial state: whether or not the radio is selected

property disabled

disabled?: boolean;

Whether the Radio is disabled

property icon

icon?: React.ReactNode;

Icon to be used

property label

label?: React.ReactNode;

Label of the Radio tile

property name

name?: string;

Name to use for form

property onChange

onChange?: (value?: T, event?: React.ChangeEvent<HTMLInputElement>) => void;

Callback function with value changed

property value

value?: T;

Value, corresponding to the value of the RadioTileGroup, to determine whether the

interface RateProps

interface RateProps<T = number>
    extends Omit<StyledBoxProps, 'name'>,
        FormControlBaseProps<T> {}

property allowHalf

allowHalf?: boolean;

Whether to allow semi selection

property character

character?: React.ReactNode;

Custom character of rate

property classPrefix

classPrefix?: string;

The prefix of the component CSS class

property cleanable

cleanable?: boolean;

Whether to allow cancel selection

property color

color?: Color | React.CSSProperties['color'];

A rate can have different colors

property max

max?: number;

Maximum rate

property onChangeActive

onChangeActive?: (value: T, event: React.SyntheticEvent) => void;

Callback function when hover state changes

property renderCharacter

renderCharacter?: (value: number, index: number) => React.ReactNode;

Render custom character

property size

size?: Size;

A rate can have different sizes

property vertical

vertical?: boolean;

Vertical Rate half

interface RowProps

interface RowProps extends BoxProps {}

property align

align?: RowAlignment | ResponsiveValue<RowAlignment>;

Vertical alignment of columns. Support responsive values

property gutter

gutter?: GutterType | ResponsiveValue<GutterType>;

Spacing between columns. Support responsive values

property justify

justify?: RowJustify | ResponsiveValue<RowJustify>;

Horizontal distribution of columns. Support responsive values

interface SegmentedControlProps

interface SegmentedControlProps<T = string | number | null>
    extends BoxProps,
        Omit<FormControlBaseProps<T>, 'readOnly' | 'plaintext'> {}

property block

block?: boolean;

Display block style, fit the width of the container

property data

data?: SegmentedItemDataType[];

Data of segmented items

property indicator

indicator?: 'pill' | 'underline';

The indicator style of the segmented control

property name

name?: string;

Name to use for form

property size

size?: Size;

A segmented control can have different sizes

interface SegmentedItemDataType

interface SegmentedItemDataType {}

property label

label: React.ReactNode;

The label of the item

property value

value: string | number;

The value of the item

interface SelectPickerProps

interface SelectPickerProps<T = any>
    extends Omit<
            FormControlPickerProps<T, PickerLocale, Option<T>>,
            'value' | 'defaultValue' | 'onChange'
        >,
        SelectProps<T>,
        Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {}

property defaultValue

defaultValue?: T;

Initial value

property onChange

onChange?: (value: T | null, event: React.SyntheticEvent) => void;

Called after the value has been changed

property value

value?: T | null;

Current value of the component. Creates a controlled component

interface SelectProps

interface SelectProps<T> extends ListboxProps, PopupProps, DeprecatedMenuProps {}

property groupBy

groupBy?: string;

Set group condition key in data

property listProps

listProps?: Partial<ListProps>;

Virtualized List Props

property onClean

onClean?: (event: React.SyntheticEvent) => void;

Called when clean

property onGroupTitleClick

onGroupTitleClick?: (event: React.SyntheticEvent) => void;

Called after clicking the group title

property onSearch

onSearch?: (searchKeyword: string, event?: React.SyntheticEvent) => void;

Called when searching

property onSelect

onSelect?: (value: any, item: Option<T>, event: React.SyntheticEvent) => void;

Called when the option is selected

property renderValue

renderValue?: (
    value: T,
    item: Option<T>,
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property searchable

searchable?: boolean;

Whether dispaly search input box

property searchBy

searchBy?: (keyword: string, label: React.ReactNode, item: Option) => boolean;

Custom search rules.

property sort

sort?: (isGroup: boolean) => (a: any, b: any) => number;

Sort options

property virtualized

virtualized?: boolean;

Whether using virtualized list

interface SidebarProps

interface SidebarProps extends BoxProps {}

property collapsible

collapsible?: boolean;

Sidebar can be collapsed

property width

width?: number | string;

Width

interface SidenavDropdownItemProps

interface SidenavDropdownItemProps<T = any>
    extends BoxProps,
        DeprecatedDropdownItemProps,
        HTMLPropsWithoutSelect {}

property active

active?: boolean;

Active the current option

property disabled

disabled?: boolean;

Disable the current option

property divider

divider?: boolean;

Whether to display the divider

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property panel

panel?: boolean;

Displays a custom panel

property submenu

submenu?: React.ReactElement;

The submenu that this menuitem controls (if exists)

interface SidenavDropdownProps

interface SidenavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {}

property disabled

disabled?: boolean;

Whether or not component is disabled

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property menuStyle

menuStyle?: React.CSSProperties;

The style of the menu

property noCaret

noCaret?: boolean;

No caret variation

property onClose

onClose?: () => void;

The callback function that the menu closes

property onOpen

onOpen?: () => void;

Menu Pop-up callback function

property onToggle

onToggle?: (
    open: boolean,
    eventKey?: T | undefined,
    event?: React.SyntheticEvent
) => void;

Callback function for menu state switching

property open

open?: boolean;

Open the menu and control it
Deprecated

property placement

placement?: PlacementCorners;

The placement of Menu

property renderToggle

renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;

Custom Toggle

property title

title?: React.ReactNode;

Define the title as a submenu

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element type for this toggle component

property toggleClassName

toggleClassName?: string;

A css class to apply to the Toggle DOM node

property trigger

trigger?: SidenavDropdownTrigger | readonly SidenavDropdownTrigger[];

Triggering events

interface SidenavDropdownToggleProps

interface SidenavDropdownToggleProps extends WithAsProps {}

property noCaret

noCaret?: boolean;

property placement

placement?: PlacementCorners;

property renderToggle

renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

interface SidenavItemProps

interface SidenavItemProps<T = any> extends BaseBoxProps, HTMLPropsWithoutSelect {}

Props of SidenavItem component

property active

active?: boolean;

Whether the item is activated

property disabled

disabled?: boolean;

Disable the item

property divider

divider?: boolean;

Render a divider

property eventKey

eventKey?: T;

The value of the item that is used to identify the item

property icon

icon?: React.ReactElement<IconProps>;

The icon displayed next to the item

property onSelect

onSelect?: (eventKey: T, event: React.MouseEvent) => void;

The callback function when the item is selected

property panel

panel?: boolean;

Render a panel

property tooltip

tooltip?: React.ReactNode;

The content of the tooltip

interface SidenavProps

interface SidenavProps<T = string | number> extends BoxProps {}

property activeKey

activeKey?: T;

Activation option, corresponding menu eventkey
Deprecated
Use <Nav activeKey> instead

property appearance

appearance?: 'default' | 'inverse' | 'subtle';

Menu style

property defaultOpenKeys

defaultOpenKeys?: T[];

Open menu, corresponding to Dropdown eventkey

property expanded

expanded?: boolean;

Whether to expand the Sidenav

property onOpenChange

onOpenChange?: (openKeys: T[], event: React.SyntheticEvent) => void;

Menu opening callback function that changed

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Select the callback function for the menu
Deprecated
Use <Nav onSelect> instead

property openKeys

openKeys?: T[];

Open menu, corresponding to Dropdown eventkey (controlled)

interface SidenavToggleProps

interface SidenavToggleProps extends IconButtonProps {}

property onToggle

onToggle?: (expanded: boolean, event: React.MouseEvent) => void;

Callback function for menu state switching

interface SlideProps

interface SlideProps extends TransitionProps {}

property placement

placement?: 'top' | 'right' | 'bottom' | 'left';

interface SliderProps

interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<T> {}

property 'aria-label'

'aria-label'?: string;

The label of the slider.

property 'aria-labelledby'

'aria-labelledby'?: string;

The id of the element containing a label for the slider.

property 'aria-valuetext'

'aria-valuetext'?: string;

A string value that provides a user-friendly name for the current value of the slider.

property barClassName

barClassName?: string;

A css class to apply to the Bar DOM node

property getAriaValueText

getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;

Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

property graduated

graduated?: boolean;

Show Ticks

property handleClassName

handleClassName?: string;

A css class to apply to the Handle node.

property handleStyle

handleStyle?: React.CSSProperties;

custom style

property handleTitle

handleTitle?: React.ReactNode;

Customizing what is displayed inside a handle

property keepTooltipOpen

keepTooltipOpen?: boolean;

If true, tooltip will always be visible even without hover

property marks

marks?: {
    value: number;
    label: React.ReactNode;
}[];

Custom marks on the ruler 6.0.0

property max

max?: number;

Maximum sliding range

property min

min?: number;

Minimum value of sliding range

property onChangeCommitted

onChangeCommitted?: (value: T, event: React.MouseEvent) => void;

Callback function that is fired when the mouseup is triggered.

property placeholder

placeholder?: React.ReactNode;

Placeholder text

property progress

progress?: boolean;

Show sliding progress bar

property renderMark

renderMark?: (mark: number) => React.ReactNode;

Customize labels on the render ruler

property renderTooltip

renderTooltip?: (value: number | undefined) => React.ReactNode;

Customize the content of the rendered Tooltip.

property size

size?: Size;

A slider can have different sizes.
'sm' 6.0.0

property step

step?: number;

Slide the value of one step

property tooltip

tooltip?: boolean;

Whether to show Tooltip when sliding

property vertical

vertical?: boolean;

Vertical Slide

interface StackProps

interface StackProps extends BoxProps {}

property direction

direction?: WithResponsive<CSSProperties['flexDirection']>;

The direction of the children in the stack

property divider

divider?: React.ReactNode;

Add an element between each child

property wrap

wrap?: boolean;

Define whether the children in the stack are forced onto one line or can wrap onto multiple lines

interface StatGroupProps

interface StatGroupProps extends BoxProps {}

property columns

columns?: number;

The number of columns in the group

property spacing

spacing?: number | string;

Spacing between columns

interface StatLabelProps

interface StatLabelProps extends BoxProps {}

property info

info?: React.ReactNode;

The info tip of the label

property uppercase

uppercase?: boolean;

Uppercase the label

interface StatProps

interface StatProps extends BoxProps {}

property bordered

bordered?: boolean;

Add a border to the component.

property icon

icon?: React.ReactNode;

The icon displayed on the left side of the component.

interface StatTrendProps

interface StatTrendProps extends BoxProps {}

property appearance

appearance?: 'default' | 'subtle';

property indicator

indicator?: 'up' | 'down' | 'equal';

interface StatValueProps

interface StatValueProps extends BoxProps {}

property formatOptions

formatOptions?: Intl.NumberFormatOptions;

property value

value?: number;

interface StepItemProps

interface StepItemProps extends WithAsProps {}

property description

description?: React.ReactNode;

The description of Steps item

property icon

icon?: React.ReactElement<IconProps>;

Set icon

property itemWidth

itemWidth?: number | string;

The width of each item.

property status

status?: 'finish' | 'wait' | 'process' | 'error';

Step status

property stepNumber

stepNumber?: number;

Number of Step

property title

title?: React.ReactNode;

The title of Steps item

interface StepsProps

interface StepsProps extends BoxProps {}

property children

children?: React.ReactNode;

Primary content

property current

current?: number;

Current execution step

property currentStatus

currentStatus?: 'finish' | 'wait' | 'process' | 'error';

Current execution step status

property small

small?: boolean;

Small size Step Bar

property vertical

vertical?: boolean;

Vertical display

interface TabProps

interface TabProps {}

property children

children?: React.ReactNode;

The children of the tab.

property disabled

disabled?: boolean;

The disabled state of the tab.

property eventKey

eventKey?: string;

The event key of the tab.

property icon

icon?: React.ReactNode;

The icon of the tab.

property title

title: React.ReactNode;

Content for the tab title.

interface TabsProps

interface TabsProps extends BoxProps {}

Props for the Tabs component.

property activeKey

activeKey?: string | number;

The key of the active tab.

property appearance

appearance?: 'tabs' | 'subtle';

The appearance of the tabs. - 'pills' appearance is deprecated. Use SegmentedControl component instead.
'tabs'

property defaultActiveKey

defaultActiveKey?: string | number;

The default key of the active tab.

property id

id?: string;

The ID of the tabs. A unique ID is automatically generated.

property onSelect

onSelect?: (
    eventKey: string | number | undefined,
    event: React.SyntheticEvent
) => void;

Callback function that is called when a tab is selected.
Parameter eventKey
The key of the selected tab.
Parameter event
The event object.

property reversed

reversed?: boolean;

Whether to reverse the order of the tabs.

property vertical

vertical?: boolean;

Whether to display the tabs vertically.

interface TagPickerProps

interface TagPickerProps<V = any>
    extends Omit<InputPickerProps<V>, 'renderValue'>,
        DeprecatedProps,
        Partial<TagOnlyProps> {}

property renderCheckbox

renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;

property renderValue

renderValue?: (
    values: V[],
    items: Option<V>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface TagProps

interface TagProps extends BoxProps {}

property children

children?: React.ReactNode;

The content of the component

property closable

closable?: boolean;

Whether to close

property color

color?: Color | React.CSSProperties['color'];

A tag can have different colors

property locale

locale?: CommonLocale;

Custom locale

property onClose

onClose?: (event: React.MouseEvent<HTMLElement>) => void;

Click the callback function for the Close button

property size

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

Different sizes

interface TextareaProps

interface TextareaProps
    extends InputBaseCommonProps,
        SanitizedTextareaProps,
        PropsWithoutChange<FormControlBaseProps> {}

property autosize

autosize?: boolean;

Enable auto resize of the textarea based on content

property maxRows

maxRows?: number;

Maximum number of rows up to which the textarea can grow Auto resize props for react-textarea-autosize

property minRows

minRows?: number;

Minimum number of rows up to which the textarea can shrink Auto resize props for react-textarea-autosize

property onChange

onChange?: PrependParameters<
    React.ChangeEventHandler<HTMLTextAreaElement>,
    [value: string]
>;

The callback function in which value is changed.

property onPressEnter

onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;

Called when Enter key is pressed

property resize

resize?: React.CSSProperties['resize'];

Whether to allow the textarea to be resized

property size

size?: Size;

The size of the textarea. 'md'

interface TextProps

interface TextProps extends BoxProps {}

property align

align?: 'left' | 'center' | 'right' | 'justify';

To set the text alignment of the element

property color

color?: BoxProps['c'];

The font color of the text. Accepts preset colors or CSS color values

property maxLines

maxLines?: number;

The number of lines to limit the provided text to. Text will be truncated with an ellipsis.

property muted

muted?: boolean;

To set the text to be muted.

property size

size?: TextSize | number | string;

The font size of the text.

property transform

transform?: 'uppercase' | 'lowercase' | 'capitalize';

To set the text transformation of the element.

property weight

weight?:
    | 'thin'
    | 'light'
    | 'regular'
    | 'medium'
    | 'semibold'
    | 'bold'
    | 'extrabold';

The font weight of the text. 'regular'

interface TimelineItemProps

interface TimelineItemProps extends BoxProps {}

property as

as?: React.ElementType;

You can use a custom element type for this component

property children

children?: React.ReactNode;

The content of the component

property dot

dot?: React.ReactNode;

Customizing the Timeline item

property time

time?: React.ReactNode;

Customized time of timeline *

interface TimelineProps

interface TimelineProps extends BoxProps {}

property align

align?: 'left' | 'right' | 'alternate';

TimeLine content relative position *

property children

children?: React.ReactNode;

The content of the component

property endless

endless?: boolean;

Timeline endless *

property isItemActive

isItemActive?: (index: number, totalItemsCount: number) => boolean;

Whether an item is active (with highlighted dot).
The last item is marked active.

interface TimePickerProps

interface TimePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<Date | null> {}

property calendarDefaultDate

calendarDefaultDate?: Date;

Calendar panel default presentation date and time

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property disabled

disabled?: boolean;

Whether disabled the component

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard

property format

format?: string;

Format date string

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property loading

loading?: boolean;

Whether to display a loading state indicator

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when clean

property onOk

onOk?: (date: Date, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (
    range: DateOptionPreset<Date>,
    event: React.MouseEvent
) => void;

Called after clicking the shortcut button

property plaintext

plaintext?: boolean;

Whether plaintext the component

property readOnly

readOnly?: boolean;

Whether read only the component

property renderValue

renderValue?: (value: Date, format: string) => string;

Custom rendering of the selected date.

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

interface TimeRangePickerProps

interface TimeRangePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<DateRange | null> {}

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property character

character?: string;

The character that separates two dates ' ~ '

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard. true

property format

format?: string;

Format of the date displayed in the input box

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property loading

loading?: boolean;

Whether to display a loading state indicator

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when the value is cleared

property onOk

onOk?: (date: DateRange, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onShortcutClick

onShortcutClick?: (
    range: DateOptionPreset<DateRange>,
    event: React.MouseEvent
) => void;

Called after clicking the shortcut button

property ranges

ranges?: DateOptionPreset<DateRange | null>[];

Predefined date ranges

property renderTitle

renderTitle?: (date: Date) => React.ReactNode;

Custom render for calendar title

property renderValue

renderValue?: (value: DateRange, format: string) => string;

Custom rendering of the selected date range.

property showHeader

showHeader?: boolean;

Whether to display the formatted date range at the header of the calendar

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

interface Toaster

interface Toaster {}

method clear

clear: () => void;

Clear all toast messages.

method push

push: (
    message: React.ReactNode,
    options?: ToastContainerProps
) => string | undefined | Promise<string | undefined>;

Push a toast message.
Parameter message
The message to be displayed. eg: <Message type="success" description="Success" /> or <Notification type="success" closable>Success</Notification>
Parameter options
The options of the toast message. (optional) eg: { placement: 'topCenter', duration: 5000 }
Returns
The key of the toast message.

method remove

remove: (key: string) => void;

Remove a toast message.
Parameter key
The key of the toast message.

interface ToggleProps

interface ToggleProps
    extends Omit<BoxProps, 'height' | 'width'>,
        SanitizedInputProps {}

property checked

checked?: boolean;

Whether the toggle is checked （Controlled)

property checkedChildren

checkedChildren?: React.ReactNode;

Checked display content

property color

color?: Color;

The color of the toggle.

property defaultChecked

defaultChecked?: boolean;

Whether the toggle is checked (Uncontrolled)

property disabled

disabled?: boolean;

Whether to disabled toggle

property label

label?: React.ReactNode;

The label of the toggle switch

property labelPlacement

labelPlacement?: 'start' | 'end';

The placement of the label 6.0.0

property loading

loading?: boolean;

Whether the checked state is being updated

property locale

locale?: ToggleLocale;

Custom locale

property onChange

onChange?: (
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Called when the state of the toggle changes

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property size

size?: Size;

The size of the toggle

property unCheckedChildren

unCheckedChildren?: React.ReactNode;

Unchecked display content

interface TooltipProps

interface TooltipProps extends BoxProps {}

property arrow

arrow?: boolean;

Whether show the arrow indicator

property children

children?: React.ReactNode;

Primary content

property placement

placement?: Placement;

Dispaly placement

property visible

visible?: boolean;

Whether visible

interface TransitionProps

interface TransitionProps extends AnimationEventProps {}

property animation

animation?: boolean;

property children

children?:
    | ((props: any, ref: React.Ref<any>) => React.ReactNode)
    | React.ReactNode;

Primary content

property className

className?: string;

Additional classes

property enteredClassName

enteredClassName?: string;

CSS class or classes applied when the component is entered

property enteringClassName

enteringClassName?: string;

CSS class or classes applied while the component is entering

property exitedClassName

exitedClassName?: string;

CSS class or classes applied when the component is exited

property exitingClassName

exitingClassName?: string;

CSS class or classes applied while the component is exiting

property in

in?: boolean;

Show the component; triggers the enter or exit animation

property timeout

timeout?: number;

A Timeout for the animation

property transitionAppear

transitionAppear?: boolean;

Run the enter animation when the component mounts, if it is initially shown

property unmountOnExit

unmountOnExit?: boolean;

Unmount the component (remove it from the DOM) when it is not shown

interface TreeNodeProps

interface TreeNodeProps extends BoxProps, TreeDragEventProps {}

Props for the TreeNode component.

property active

active?: boolean;

Whether the node is active.

property disabled

disabled?: boolean;

Whether the node is disabled.

property draggable

draggable?: boolean;

Whether the node is draggable.

property dragging

dragging?: boolean;

Whether the node is being dragged.

property dragStatus

dragStatus?: DragStatus;

Drag status of the node.

property expanded

expanded?: boolean;

Whether the node is expanded.

property focus

focus?: boolean;

Whether the node should be focused.

property hasChildren

hasChildren?: boolean;

Whether the node has children.

property label

label?: TreeNodeData['label'];

The label of the node.

property layer

layer: number;

The layer of the node in the tree hierarchy.

property loading

loading?: boolean;

Whether the node is in a loading state.

property nodeData

nodeData: any;

The data associated with the node.

property onExpand

onExpand?: (nodeData: TreeNodeData, expanded?: boolean) => void;

Callback function called when the node is expanded.

property onSelect

onSelect?: (nodeData: TreeNodeData, event: React.SyntheticEvent) => void;

Callback function called when the node is selected.

property value

value?: TreeNodeData['value'];

The value of the node.

property visible

visible: boolean;

Whether the node is visible.

interface TreePickerProps

interface TreePickerProps<V = number | string | null>
    extends TreeViewProps<V>,
        TreeExtraProps,
        DeprecatedMenuProps,
        FormControlPickerProps<V, PickerLocale, TreeNode>,
        Pick<PickerToggleProps, 'caretAs' | 'loading'> {}

property onlyLeafSelectable

onlyLeafSelectable?: boolean;

Whether only leaf nodes can be selected
false

property popupAutoWidth

popupAutoWidth?: boolean;

Popup auto width
true

property renderValue

renderValue?: (
    value: V,
    selectedNode: TreeNode,
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property treeHeight

treeHeight?: number;

The height of the tree

interface TreeProps

interface TreeProps<T = string | number | null>
    extends WithTreeDragProps<TreeViewProps<T>>,
        TreeExtraProps {}

property defaultValue

defaultValue?: T;

Default selected Value

property onChange

onChange?: (value: T, event: React.SyntheticEvent) => void;

Callback function called after the value has been changed.
Parameter value
The new value.
Parameter event
The event object.

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

interface UploaderInstance

interface UploaderInstance {}

property root

root: HTMLElement;

property start

start: (file?: FileType) => void;

interface UploaderProps

interface UploaderProps
    extends BaseBoxProps,
        Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {}

property accept

accept?: string;

File types that can be accepted. See input accept Attribute

property action

action: string;

Uploading URL

property autoUpload

autoUpload?: boolean;

Automatically upload files after selecting them

property children

children?: React.ReactElement;

Primary content

property data

data?: any;

Upload the parameters with

property defaultFileList

defaultFileList?: FileType[];

List of uploaded files

property disabled

disabled?: boolean;

Disabled upload button

property disabledFileItem

disabledFileItem?: boolean;

Disabled file item

property disableMultipart

disableMultipart?: boolean;

If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.

property draggable

draggable?: boolean;

Supported Drag and drop upload *

property fileList

fileList?: FileType[];

List of uploaded files （Controlled）

property fileListVisible

fileListVisible?: boolean;

File list can be rendered

property headers

headers?: any;

Set Upload request Header

property listType

listType?: 'text' | 'picture-text' | 'picture';

Upload list Style

property locale

locale?: UploaderLocale;

Custom locale

property maxPreviewFileSize

maxPreviewFileSize?: number;

Max file size limit of the preview file

property method

method?: string;

The http method of upload request

property multiple

multiple?: boolean;

Allow multiple file uploads

property name

name?: string;

Upload the parameter name of the corresponding file

property onChange

onChange?: (
    fileList: FileType[],
    event: React.ChangeEvent | React.MouseEvent
) => void;

callback function that the upload queue has changed

property onError

onError?: (
    status: ErrorStatus,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

Upload callback function with error

property onPreview

onPreview?: (file: FileType, event: React.SyntheticEvent) => void;

In the file list, click the callback function for the uploaded file

property onProgress

onProgress?: (
    percent: number,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

Callback functions that upload progress change

property onRemove

onRemove?: (file: FileType) => void;

In the file list, click the callback function to delete a file

property onReupload

onReupload?: (file: FileType) => void;

In the file list, for uploading failed files, click the callback function to upload

property onSuccess

onSuccess?: (
    response: any,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

callback function after successful upload

property onUpload

onUpload?: (file: FileType, uploadData: any, xhr: XMLHttpRequest) => void;

The callback function that starts the upload file

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property ref

ref?: React.Ref<UploaderInstance | undefined>;

Custom ref for Uploader

property removable

removable?: boolean;

Removable list file

property renderFileInfo

renderFileInfo?: (
    file: FileType,
    fileElement: React.ReactNode
) => React.ReactNode;

Custom render file information

property renderThumbnail

renderThumbnail?: (
    file: FileType,
    thumbnail: React.ReactNode
) => React.ReactNode;

Custom render thumbnail

property shouldQueueUpdate

shouldQueueUpdate?: (
    fileList: FileType[],
    newFile: FileType[] | FileType
) => boolean | Promise<boolean>;

Allow the queue to be updated. After you select a file, update the checksum function before the upload file queue, and return false to not update

property shouldUpload

shouldUpload?: (file: FileType) => boolean | Promise<boolean>;

Allow uploading of files. Check function before file upload, return false without uploading

property timeout

timeout?: number;

Set upload timeout

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element for this component

property withCredentials

withCredentials?: boolean;

Whether to carry cookies when uploading requests

interface UseFormControlProps

interface UseFormControlProps {}

property checkAsync

checkAsync?: boolean;

Asynchronous check value

property checkTrigger

checkTrigger?: CheckTriggerType;

The data validation trigger type

property errorMessage

errorMessage?: React.ReactNode;

Show error messages

property name

name: string;

The name of form field

property rule

rule?: CheckType<unknown, any>;

Validation rule

property shouldResetWithUnmount

shouldResetWithUnmount?: boolean;

Remove field value and error message when component is unmounted

property value

value?: any;

The current value (controlled)

interface VStackProps

interface VStackProps extends Omit<StackProps, 'direction'> {}

property reverse

reverse?: boolean;

Enums

enum CalendarState

enum CalendarState {
    'TIME' = 'TIME',
    'MONTH' = 'MONTH',
}

member 'MONTH'

'MONTH' = 'MONTH'

member 'TIME'

'TIME' = 'TIME'

Type Aliases

type AccordionPanelProps

type AccordionPanelProps = PanelProps;

type AccordionProps

type AccordionProps = Omit<PanelGroupProps, 'accordion'>;

type BounceProps

type BounceProps = TransitionProps;

type CardBodyProps

type CardBodyProps = ComponentProps;

type CardFooterProps

type CardFooterProps = ComponentProps;

type CardHeaderProps

type CardHeaderProps = ComponentProps;

type ContainerProps

type ContainerProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;

type ContentProps

type ContentProps = ComponentProps;

type DateRange

type DateRange = [Date, Date];

type DisabledDateFunction

type DisabledDateFunction = (
    /**
     * Date used to determine if disabling is required.
     */
    date: Date,
    /**
     * Date selected.
     */
    selectDate?: ValueType,
    /**
     * Whether to choose to finish now.
     * If `false`, only the start date is selected, waiting for the selection end date.
     */
    selectedDone?: boolean,
    /**
     * Call the target of the `shouldDisableDate` function.
     */
    target?: DATERANGE_DISABLED_TARGET
) => boolean;

type DrawerActionsProps

type DrawerActionsProps = ComponentProps;

type DrawerBodyProps

type DrawerBodyProps = ModalBodyProps;

type DrawerFooterProps

type DrawerFooterProps = ModalFooterProps;

type DrawerHeaderProps

type DrawerHeaderProps = ModalHeaderProps;

type DrawerTitleProps

type DrawerTitleProps = ModalTitleProps;

type FadeProps

type FadeProps = TransitionProps;

type FileStatusType

type FileStatusType = 'inited' | 'uploading' | 'error' | 'finished';

type FooterProps

type FooterProps = ComponentProps;

type FormControlAccepterProps

type FormControlAccepterProps<ValueType = any> = FormControlBaseProps<ValueType>;

Props that FormControl passes to its accepter

type HeaderProps

type HeaderProps = ComponentProps;

type HeadingGroupProps

type HeadingGroupProps = ComponentProps;

type InputGroupButtonProps

type InputGroupButtonProps = ButtonProps;

type MaskedInputProps

type MaskedInputProps = PropsWithoutChange<TextMaskProps> & Omit<InputProps, 'type'>;

type ModalBodyProps

type ModalBodyProps = BoxProps;

type ModalFooterProps

type ModalFooterProps = ComponentProps;

type ModalSize

type ModalSize = Size | 'full' | number | string;

type ModalTitleProps

type ModalTitleProps = ComponentProps;

type NavbarBrandProps

type NavbarBrandProps = ComponentProps;

type NavMegaMenuProps

type NavMegaMenuProps = NavbarMegaMenuProps;

type Query

type Query = string;

The type of the query parameter.

type RangeSliderProps

type RangeSliderProps = SliderProps<Range> & {
    /**
     * Add constraint to validate before onChange is dispatched
     */
    constraint?: (range: Range) => boolean;
};

type RowAlignment

type RowAlignment = 'top' | 'middle' | 'bottom';

type RowJustify

type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';

type SidenavBodyProps

type SidenavBodyProps = ComponentProps;

type SidenavHeaderProps

type SidenavHeaderProps = ComponentProps;

type StatHelpTextProps

type StatHelpTextProps = ComponentProps;

type StatValueUnitProps

type StatValueUnitProps = ComponentProps;

type TableProps

type TableProps<
    Row extends RowDataType = any,
    Key extends RowKeyType = string
> = TableBaseProps<Row, Key>;

type TagGroupProps

type TagGroupProps = ComponentProps;

type TagInputProps

type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> &
    Partial<TagOnlyProps>;

type VisuallyHiddenProps

type VisuallyHiddenProps = ComponentProps;

type WhisperInstance

type WhisperInstance = OverlayTriggerHandle;

type WhisperProps

type WhisperProps = OverlayTriggerProps;

Package Files (220)

Dependencies (14)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/rsuite.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/rsuite)

HTML

<a href="https://www.jsdocs.io/package/rsuite"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 seconds ago.
Package analyzed in 23318 ms.
Missing or incorrect documentation? Open an issue for this package.

rsuite

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable Accordion

See Also

variable AccordionPanel

See Also

variable Affix

See Also

variable Animation

variable AutoComplete

See Also

variable Avatar

See Also

variable AvatarGroup

See Also

variable Badge

See Also

variable Bounce

See Also

variable Box

See Also

variable Breadcrumb

See Also

variable BreadcrumbItem

See Also

variable Button

See Also

variable ButtonGroup

See Also

variable ButtonGroupContext

variable ButtonToolbar

See Also

variable Calendar

See Also

variable Card

variable CardBody

variable CardFooter

variable CardGroup

variable CardHeader

variable Carousel

See Also

variable Cascader

See Also

variable CascadeTree

See Also

variable Center

variable Checkbox

See Also

variable CheckboxGroup

See Also

variable CheckboxGroupContext

variable CheckPicker

See Also

variable CheckTree

See Also

variable CheckTreePicker

See Also

variable Col

See Also

variable Collapse

See Also

variable Container

See Also

variable Content

See Also

variable DateInput

See Also

variable DatePicker

See Also

variable DateRangeInput

See Also