rsuite

  • Version 5.67.0
  • Published
  • 24.7 MB
  • 15 dependencies
  • MIT license

Install

npm i rsuite
yarn add rsuite
pnpm add rsuite

Overview

A suite of react components

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable Accordion

const Accordion: AccordionComponent;
  • The Accordion component is used to display content that can be collapsed.

    See Also

    • https://rsuitejs.com/components/accordion

variable Affix

const Affix: RsRefForwardingComponent<'div', AffixProps>;
  • 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: PickerComponent<AutoCompleteProps<string>>;
    • 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: RsRefForwardingComponent<'div', AvatarProps>;
    • The Avatar component is used to represent user or brand.

      See Also

      • https://rsuitejs.com/components/avatar

    variable AvatarGroup

    const AvatarGroup: RsRefForwardingComponent<'div', AvatarGroupProps>;
    • The AvatarGroup component is used to represent a collection of avatars.

      See Also

      • https://rsuitejs.com/components/avatar

    variable Badge

    const Badge: RsRefForwardingComponent<'div', BadgeProps>;
    • The Badge component is usually used to mark or highlight the status or quantity of an object.

      See Also

      • https://rsuitejs.com/components/badge

    const Breadcrumb: BreadcrumbComponent;
    • The Breadcrumb component is used to indicate the current page location and navigate.

      See Also

      • https://rsuitejs.com/components/breadcrumb

    variable Button

    const Button: RsRefForwardingComponent<'button', ButtonProps>;
    • The Button component is used to trigger a custom action.

      See Also

      • https://rsuitejs.com/components/button

    variable ButtonGroup

    const ButtonGroup: RsRefForwardingComponent<'div', ButtonGroupProps>;
    • 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 ButtonToolbar

    const ButtonToolbar: RsRefForwardingComponent<StackComponent, ButtonToolbarProps>;
    • 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: RsRefForwardingComponent<
    RsRefForwardingComponent<'div', CalendarProps>,
    CalendarProps
    >;
    • The Calendar component is used to select dates.

      See Also

      • https://rsuitejs.com/components/calendar

    const Carousel: RsRefForwardingComponent<'div', CarouselProps>;
    • 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 Checkbox

    const Checkbox: RsRefForwardingComponent<'div', CheckboxProps<ValueType>>;
    • The Checkbox component is used for selecting multiple options from a set.

      See Also

      • https://rsuitejs.com/components/checkbox

    variable CheckboxGroup

    const CheckboxGroup: RsRefForwardingComponent<
    'div',
    CheckboxGroupProps<ValueType[]>
    >;
    • The CheckboxGroup component is used for selecting multiple options which are unrelated.

      See Also

      • https://rsuitejs.com/components/checkbox/#checkbox-group

    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: RsRefForwardingComponent<'div', CheckTreeProps<ValueType>>;
    • 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: PickerComponent<CheckTreePickerProps<ValueType>>;
    • 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: RsRefForwardingComponent<'div', ColProps>;
    • The Col component is used for layout and grids.

      See Also

      • https://rsuitejs.com/en/components/grid

    variable Container

    const Container: React.ForwardRefExoticComponent<any>;
    • 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: RsRefForwardingComponent<'main', any>;
    • 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: React.ForwardRefExoticComponent<any>;
    • 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: RsRefForwardingComponent<'div', DatePickerProps>;
    • 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: DateRangePickerComponent;
    • 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: RsRefForwardingComponent<'div', DividerProps>;
    • 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: DrawerComponent;
    • The Drawer component is used to display extra content from a main content.

      See Also

      • https://rsuitejs.com/components/drawer

    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 FlexboxGrid

    const FlexboxGrid: FlexboxGridCompont;
    • The FlexboxGrid component is a box that can be used to layout other components.

      See Also

      • https://rsuitejs.com/components/flexbox-grid

    const Footer: RsRefForwardingComponent<'footer', any>;
    • The <Footer> component is used to specify the footer of the page.

      See Also

      • https://rsuitejs.com/components/container/

    variable Form

    const Form: FormComponent;
    • The Form component is a form interface for collecting and validating user input.

      See Also

      • https://rsuitejs.com/components/form

    variable Grid

    const Grid: RsRefForwardingComponent<'div', GridProps>;
    • 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: RsRefForwardingComponent<'header', any>;
    • The <Header> component is used to specify the header of the page.

      See Also

      • https://rsuitejs.com/components/container/

    variable Heading

    const Heading: RsRefForwardingComponent<'h3', HeadingProps>;
    • The Heading component is used to display a heading.

      See Also

      • https://rsuitejs.com/components/heading

    variable HeadingGroup

    const HeadingGroup: RsRefForwardingComponent<'hgroup', any>;
    • HeadingGroup is a group of headings.

      See Also

      • https://rsuitejs.com/components/heading

    variable Highlight

    const Highlight: RsRefForwardingComponent<'div', HighlightProps>;
    • Highlight the matching text in the content.

      See Also

      • https://rsuitejs.com/components/highlight

    variable HStack

    const HStack: React.ForwardRefExoticComponent<any>;

      variable IconButton

      const IconButton: RsRefForwardingComponent<
      RsRefForwardingComponent<'button', ButtonProps>,
      IconButtonProps & { ref?: React.Ref<HTMLElement> }
      >;
      • The IconButton component is used to specify a button with icon.

        See Also

        • https://rsuitejs.com/components/button

      variable InlineEdit

      const InlineEdit: RsRefForwardingComponent<'div', InlineEditProps>;

        variable Input

        const Input: RsRefForwardingComponent<'input', InputProps>;
        • The <Input> component is used to get user input in a text field.

          See Also

          • https://rsuitejs.com/components/input

        variable InputGroup

        const InputGroup: InputGroupComponent;
        • The InputGroup component is used to specify an input field with an add-on.

          See Also

          • https://rsuitejs.com/components/input/#input-group

        variable InputNumber

        const InputNumber: React.ForwardRefExoticComponent<any>;
        • The InputNumber component is used to enter a numerical value.

          See Also

          • https://rsuitejs.com/components/input-number

        variable InputPicker

        const InputPicker: PickerComponent<InputPickerProps<any>>;
        • Single item selector with text box input.

          See Also

          • https://rsuitejs.com/components/input-picker

        variable List

        const List: ListComponent;
        • The List component is used to specify the layout of the list.

          See Also

          • https://rsuitejs.com/components/list

        variable Loader

        const Loader: RsRefForwardingComponent<'div', LoaderProps>;
        • 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: RsRefForwardingComponent<'input', MaskedInputProps>;

          variable Message

          const Message: RsRefForwardingComponent<'div', MessageProps>;
          • The Message component is used to display important messages to users.

            See Also

            • https://rsuitejs.com/components/message

          const Modal: ModalComponent;
          • The Modal component is used to show content in a layer above the app.

            See Also

            • https://rsuitejs.com/components/modal

          variable MultiCascader

          const MultiCascader: PickerComponent<MultiCascaderProps<DataItemValue>>;
          • The MultiCascader component is used to select multiple values from cascading options.

            See Also

            • https://rsuitejs.com/components/multi-cascader/

          variable MultiCascadeTree

          const MultiCascadeTree: React.ForwardRefExoticComponent<any>;
          • The MultiCascadeTree component is used to select multiple values from cascading options.

            See Also

            • https://rsuitejs.com/components/multi-cascade-tree/

          const Nav: NavComponent;
          • The Nav component is used to create navigation links.

            See Also

            • https://rsuitejs.com/components/nav

          const Navbar: NavbarComponent;
          • The Navbar component is used to create a navigation header.

            See Also

            • https://rsuitejs.com/components/navbar

          variable Notification

          const Notification: RsRefForwardingComponent<'div', NotificationProps>;
          • The Notification component is used to display global messages and notifications.

            See Also

            • https://rsuitejs.com/components/notification

          variable Pagination

          const Pagination: RsRefForwardingComponent<'div', PaginationGroupProps>;
          • Pagination component for displaying page numbers.

            See Also

            • https://rsuitejs.com/components/pagination

          variable Panel

          const Panel: RsRefForwardingComponent<'div', PanelProps<string | number>>;
          • The Panel component is used to display content that can be collapsed.

            See Also

            • https://rsuitejs.com/components/panel

          variable PanelGroup

          const PanelGroup: React.ForwardRefExoticComponent<any>;
          • The PanelGroup component is used to display content that can be collapsed.

            See Also

            • https://rsuitejs.com/components/panel

          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 Popover

          const Popover: RsRefForwardingComponent<'div', PopoverProps>;
          • 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 Radio

          const Radio: React.ForwardRefExoticComponent<any>;
          • The Radio component is a simple radio button.

            See Also

            • https://rsuitejs.com/components/radio

          variable RadioGroup

          const RadioGroup: RsRefForwardingComponent<'div', RadioGroupProps<ValueType>>;
          • 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: React.ForwardRefExoticComponent<any>;
          • 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: RsRefForwardingComponent<
          'div',
          RadioTileGroupProps<ValueType>
          >;
          • 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: React.ForwardRefExoticComponent<any>;
          • 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: RsRefForwardingComponent<'ul', RateProps<number>>;
          • 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: RsRefForwardingComponent<'div', RowProps>;
          • The Row component is used for layout and grids.

            See Also

            • https://rsuitejs.com/components/grid

          variable SafeAnchor

          const SafeAnchor: RsRefForwardingComponent<'a', SafeAnchorProps>;
          • A SafeAnchor is a wrapper around the <a> HTML element.

          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 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: RsRefForwardingComponent<'aside', SidebarProps>;
          • The Sidebar component for use with the Container component.

            See Also

            • https://rsuitejs.com/components/container/

          variable Sidenav

          const Sidenav: SidenavComponent;
          • The Sidenav component is an encapsulation of the page sidebar Nav.

            See Also

            • https://rsuitejs.com/components/sidenav/

          variable Slider

          const Slider: React.ForwardRefExoticComponent<any>;
          • 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: StackComponent;
          • 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 Steps

          const Steps: StepsComponent;
          • The Steps component is used to guide users to complete tasks in accordance with the process.

            See Also

            • https://rsuitejs.com/components/steps

          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<any, any>;
          Column: any;
          HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(
          props: any
          ) => React.ReactElement<any, 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: TabsComponent;
          • 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: RsRefForwardingComponent<'div', TagProps>;
          • 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

          variable TagGroup

          const TagGroup: RsRefForwardingComponent<'div', any>;
          • The TagGroup component for use with the Tag component.

            See Also

            • https://rsuitejs.com/components/tag/

          variable TagInput

          const TagInput: PickerComponent<TagInputProps>;
          • 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: PickerComponent<TagPickerProps>;
          • TagPicker component enables multi-selection by tags and supports new options.

            See Also

            • https://rsuitejs.com/components/tag-picker/

          variable Text

          const Text: RsRefForwardingComponent<'p', TextProps>;
          • The Text component is used to display text.

            See Also

            • https://rsuitejs.com/components/text

          variable Timeline

          const Timeline: TimelineComponent;
          • The Timeline component is used to display a list of items in chronological order.

            See Also

            • https://rsuitejs.com/components/timeline

          variable toaster

          const toaster: Toaster;

            variable Toggle

            const Toggle: RsRefForwardingComponent<'label', ToggleProps>;
            • The Toggle component is used to activate or deactivate an element.

              See Also

              • https://rsuitejs.com/components/toggle

            variable Tooltip

            const Tooltip: RsRefForwardingComponent<'div', TooltipProps>;
            • The Tooltip component is used to describe a element.

              See Also

              • https://rsuitejs.com/components/tooltip

            variable Tree

            const Tree: RsRefForwardingComponent<'div', TreeProps<string | number>>;
            • The Tree component is used to display hierarchical data.

              See Also

              • https://rsuitejs.com/components/tree

            variable TreePicker

            const TreePicker: PickerComponent<TreePickerProps<string | number>>;
            • 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: React.ForwardRefExoticComponent<any>;
            • The Uploader component is used to upload files.

              See Also

              • https://rsuitejs.com/components/uploader

            variable useMediaQuery

            const useMediaQuery: (query: string | string[]) => boolean[];

              variable VisuallyHidden

              const VisuallyHidden: RsRefForwardingComponent<'span', any>;
              • 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: React.ForwardRefExoticComponent<any>;

                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 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 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.63.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 useFormClassNames

                useFormClassNames: ({
                classPrefix,
                className,
                fluid,
                layout,
                readOnly,
                plaintext,
                disabled,
                }: Pick<
                FormProps,
                | 'classPrefix'
                | 'className'
                | 'fluid'
                | 'layout'
                | 'readOnly'
                | 'plaintext'
                | 'disabled'
                >) => string;
                • Take props and return className for styles

                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/

                Interfaces

                interface AffixProps

                interface AffixProps extends WithAsProps {}

                  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 AutoCompleteProps

                  interface AutoCompleteProps<T = ValueType>
                  extends WithAsProps,
                  FormControlPickerProps<T, any, ItemDataType | string> {}

                    property autoComplete

                    autoComplete?: string;
                    • AutoComplete Content

                    property filterBy

                    filterBy?: (value: string, item: ItemDataType) => boolean;
                    • Custom filter function to determine whether the item will be displayed

                    property menuAutoWidth

                    menuAutoWidth?: boolean;
                    • The width of the menu will automatically follow the width of the input box

                    property menuClassName

                    menuClassName?: string;
                    • Additional classes for menu

                    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: ItemDataType, 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?: TypeAttributes.Placement;
                    • The placement of component

                    property renderMenu

                    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
                    • Customizing the Rendering Menu list

                    property renderMenuItem

                    renderMenuItem?: (label: React.ReactNode, item: ItemDataType) => React.ReactNode;
                    • Custom selected option

                    property selectOnEnter

                    selectOnEnter?: boolean;
                    • When set to false, the Enter key selection function is invalid

                    property size

                    size?: TypeAttributes.Size;
                    • A component can have different sizes

                    interface AvatarGroupProps

                    interface AvatarGroupProps extends WithAsProps {}

                      property size

                      size?: Size;
                      • Set the size of all avatars. xxl and xs added in v5.59.0

                      property spacing

                      spacing?: number;
                      • Set the spacing of the avatar

                      property stack

                      stack?: boolean;
                      • Render all avatars as stacks

                      interface AvatarProps

                      interface AvatarProps extends WithAsProps {}

                        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?: TypeAttributes.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?: Size;
                        • A avatar can have different sizes.

                          'md' xxl and xs added in v5.59.0

                        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 WithAsProps {}

                          property color

                          color?: TypeAttributes.Color;
                          • A badge can have different colors

                          property content

                          content?: React.ReactNode;
                          • Main content

                          property maxCount

                          maxCount?: number;
                          • Max count

                          interface BasePaginationProps

                          interface PaginationProps extends WithAsProps {}

                            property activePage

                            activePage?: number;
                            • Current page number

                            boundaryLinks?: boolean;
                            • Show border paging buttons 1 and pages

                            property disabled

                            disabled?: boolean | ((eventKey: number | string) => boolean);
                            • Disabled component

                            property ellipsis

                            ellipsis?: boolean | React.ReactNode;
                            • Displays the ellipsis

                            property first

                            first?: boolean | React.ReactNode;
                            • Displays the first page

                            property last

                            last?: boolean | React.ReactNode;
                            • Displays the last page

                            property linkAs

                            linkAs?: React.ElementType;
                            • Customizes the element type for the component

                            property linkProps

                            linkProps?: Record<string, any>;
                            • Additional props passed as-is to the underlying link for non-active items

                            property locale

                            locale?: PaginationLocale;
                            • Custom locale

                            property maxButtons

                            maxButtons?: number;
                            • Page buttons display the maximum number of

                            property next

                            next?: boolean | React.ReactNode;
                            • Displays the next page

                            property onSelect

                            onSelect?: (eventKey: string | number, event: React.MouseEvent) => void;
                            • callback function for pagination clicked

                            property pages

                            pages?: number;
                            • Total pages

                            property prev

                            prev?: boolean | React.ReactNode;
                            • Displays the prev page

                            property size

                            size?: TypeAttributes.Size;
                            • A pagination can have different sizes

                            interface BreadcrumbItemProps extends WithAsProps<React.ElementType | string> {}
                              active?: boolean;
                                href?: string;
                                  target?: string;
                                    title?: string;
                                      interface BreadcrumbProps extends WithAsProps {}
                                        locale?: BreadcrumbLocale;
                                        • Custom locale

                                        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.

                                        onExpand?: (event: React.MouseEvent) => void;
                                        • A function to be called when you are in the collapsed view and click the ellipsis.

                                        separator?: React.ReactNode;
                                        • Shorthand for primary content of the React.ReactNode

                                        interface ButtonGroupProps

                                        interface ButtonGroupProps extends WithAsProps {}

                                          property block

                                          block?: boolean;
                                          • Display block buttongroups

                                          property disabled

                                          disabled?: boolean;
                                          • A button can show it is currently unable to be interacted with

                                          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?: TypeAttributes.Size;
                                          • A button group can have different sizes

                                          property vertical

                                          vertical?: boolean;
                                          • Vertical layouts of button

                                          interface ButtonProps

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

                                            property active

                                            active?: boolean;
                                            • A button can show it is currently the active user selection

                                            property appearance

                                            appearance?: TypeAttributes.Appearance;
                                            • A button can have different appearances.

                                            property block

                                            block?: boolean;
                                            • Format button to appear inside a content block

                                            property color

                                            color?: TypeAttributes.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 ripple

                                            ripple?: boolean;
                                            • Ripple after button click

                                            property size

                                            size?: TypeAttributes.Size;
                                            • 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 type

                                            type?: 'button' | 'reset' | 'submit';
                                            • Defines HTML button type attribute

                                            interface ButtonToolbarProps

                                            interface ButtonToolbarProps extends WithAsProps {}

                                              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 WithAsProps {}

                                                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 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 CarouselProps

                                                interface CarouselProps extends WithAsProps {}

                                                  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 = DataItemValue>
                                                  extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>,
                                                  CascadeTreeProps<T>,
                                                  Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

                                                    property inline

                                                    inline?: boolean;
                                                    • The panel is displayed directly when the component is initialized

                                                      See Also

                                                      • CascadeTree https://rsuitejs.com/components/cascade-tree

                                                      Deprecated

                                                      Use CascadeTree instead

                                                    property menuClassName

                                                    menuClassName?: string;
                                                    • Custom menu class name

                                                      Deprecated

                                                      Use popupClassName instead

                                                    property menuHeight

                                                    menuHeight?: number | string;
                                                    • Sets the height of the menu

                                                      Deprecated

                                                      Use columnHeight instead

                                                    property menuStyle

                                                    menuStyle?: React.CSSProperties;
                                                    • Custom menu style

                                                      Deprecated

                                                      Use popupStyle instead

                                                    property menuWidth

                                                    menuWidth?: number;
                                                    • Sets the width of the menu.

                                                      Deprecated

                                                      Use columnWidth instead

                                                    property onClean

                                                    onClean?: (event: React.SyntheticEvent) => void;
                                                    • Called when clean

                                                    property parentSelectable

                                                    parentSelectable?: boolean;
                                                    • When true, make the parent node selectable

                                                    property popupClassName

                                                    popupClassName?: string;
                                                    • Custom popup style

                                                    property popupStyle

                                                    popupStyle?: React.CSSProperties;
                                                    • Custom popup style

                                                    property renderMenu

                                                    renderMenu?: (
                                                    items: readonly ItemDataType<T>[],
                                                    menu: React.ReactNode,
                                                    parentNode?: any,
                                                    layer?: number
                                                    ) => React.ReactNode;
                                                    • Custom render menu

                                                      Deprecated

                                                      Use renderColumn instead

                                                    property renderMenuItem

                                                    renderMenuItem?: (
                                                    node: React.ReactNode,
                                                    item: ItemDataType<T>
                                                    ) => React.ReactNode;
                                                    • Custom render menu item

                                                      Deprecated

                                                      Use renderTreeNode instead

                                                    property renderValue

                                                    renderValue?: (
                                                    value: T,
                                                    selectedPaths: ItemDataType<T>[],
                                                    selectedElement: React.ReactNode
                                                    ) => React.ReactNode;
                                                    • Custom render selected items

                                                    interface CascadeTreeProps

                                                    interface CascadeTreeProps<T, V = T>
                                                    extends WithAsProps,
                                                    DataProps<ItemDataType<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: ItemDataType<T>
                                                      ) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
                                                      • Asynchronously load the children of the tree node.

                                                      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: ItemDataType<T>,
                                                      selectedPaths: ItemDataType<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: ItemDataType<T>[]
                                                      ) => React.ReactNode;
                                                      • Custom render search items

                                                      property renderTreeNode

                                                      renderTreeNode?: (
                                                      node: React.ReactNode,
                                                      itemData: ItemDataType<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 CheckboxGroupProps

                                                        interface CheckboxGroupProps<V = ValueType[]>
                                                        extends WithAsProps,
                                                        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 = ValueType>
                                                          extends WithAsProps,
                                                          Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {}

                                                            property checkable

                                                            checkable?: boolean;
                                                            • Whether to show checkbox

                                                              Used in MultiCascader

                                                            property checked

                                                            checked?: boolean;
                                                            • Whether or not checkbox is checked.

                                                            property color

                                                            color?: TypeAttributes.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>
                                                            extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>,
                                                            MultipleSelectProps<T>,
                                                            Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

                                                              property countable

                                                              countable?: boolean;
                                                              • A picker that can be counted

                                                              property sticky

                                                              sticky?: boolean;
                                                              • Top the selected option in the options

                                                              interface CheckTreePickerProps

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

                                                                property countable

                                                                countable?: boolean;
                                                                • A picker that can be counted

                                                                property popupAutoWidth

                                                                popupAutoWidth?: boolean;
                                                                • Popup auto width

                                                                  true

                                                                property popupClassName

                                                                popupClassName?: string;
                                                                • Custom popup style

                                                                property popupStyle

                                                                popupStyle?: React.CSSProperties;
                                                                • Custom popup style

                                                                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 WithAsProps {}

                                                                      property lg

                                                                      lg?: number;
                                                                      • The number of columns you wish to span for Large devices Desktops (≥ 992px)

                                                                      property lgHidden

                                                                      lgHidden?: boolean;
                                                                      • Hide column on Large devices Desktops

                                                                      property lgOffset

                                                                      lgOffset?: number;
                                                                      • Move columns to the right for Large devices Desktops

                                                                      property lgPull

                                                                      lgPull?: number;
                                                                      • Change the order of grid columns to the left for Large devices Desktops

                                                                      property lgPush

                                                                      lgPush?: number;
                                                                      • Change the order of grid columns to the right for Large devices Desktops

                                                                      property md

                                                                      md?: number;
                                                                      • The number of columns you wish to span for Medium devices Desktops (≥ 768px)

                                                                      property mdHidden

                                                                      mdHidden?: boolean;
                                                                      • Hide column on Medium devices Desktops

                                                                      property mdOffset

                                                                      mdOffset?: number;
                                                                      • Move columns to the right for Medium devices Desktops

                                                                      property mdPull

                                                                      mdPull?: number;
                                                                      • Change the order of grid columns to the left for Medium devices Desktops

                                                                      property mdPush

                                                                      mdPush?: number;
                                                                      • Change the order of grid columns to the right for Medium devices Desktops

                                                                      property sm

                                                                      sm?: number;
                                                                      • The number of columns you wish to span for Small devices Tablets (≥ 576px)

                                                                      property smHidden

                                                                      smHidden?: boolean;
                                                                      • Hide column on Small devices Tablets

                                                                      property smOffset

                                                                      smOffset?: number;
                                                                      • Move columns to the right for Small devices Tablets

                                                                      property smPull

                                                                      smPull?: number;
                                                                      • Change the order of grid columns to the left for Small devices Tablets

                                                                      property smPush

                                                                      smPush?: number;
                                                                      • Change the order of grid columns to the right for Small devices Tablets

                                                                      property xl

                                                                      xl?: number;
                                                                      • The number of columns you wish to span for Extra Large devices Desktops (≥ 1200px)

                                                                      property xlHidden

                                                                      xlHidden?: boolean;
                                                                      • Hide column on Extra large devices Desktops

                                                                      property xlOffset

                                                                      xlOffset?: number;
                                                                      • Move columns to the right for Extra large devices Desktops

                                                                      property xlPull

                                                                      xlPull?: number;
                                                                      • Change the order of grid columns to the left for Extra large devices Desktops

                                                                      property xlPush

                                                                      xlPush?: number;
                                                                      • Change the order of grid columns to the right for Extra large devices Desktops

                                                                      property xs

                                                                      xs?: number;
                                                                      • The number of columns you wish to span for Extra small devices Phones (< 576px)

                                                                      property xsHidden

                                                                      xsHidden?: boolean;
                                                                      • Hide column on Extra small devices Phones

                                                                      property xsOffset

                                                                      xsOffset?: number;
                                                                      • Move columns to the right for Extra small devices Phones

                                                                      property xsPull

                                                                      xsPull?: number;
                                                                      • Change the order of grid columns to the left for Extra small devices Phones

                                                                      property xsPush

                                                                      xsPush?: number;
                                                                      • Change the order of grid columns to the right for Extra small devices Phones

                                                                      property xxl

                                                                      xxl?: number;
                                                                      • The number of columns you wish to span for Ultra Large devices Desktops (≥ 1400px)

                                                                      property xxlHidden

                                                                      xxlHidden?: boolean;
                                                                      • Hide column on Ultra large devices Desktops

                                                                      property xxlOffset

                                                                      xxlOffset?: number;
                                                                      • Move columns to the right for Ultra large devices Desktops

                                                                      property xxlPull

                                                                      xxlPull?: number;
                                                                      • Change the order of grid columns to the left for Ultra large devices Desktops

                                                                      property xxlPush

                                                                      xxlPush?: number;
                                                                      • Change the order of grid columns to the right for Ultra large devices Desktops

                                                                      interface CustomProviderProps

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

                                                                        property children

                                                                        children?: React.ReactNode;
                                                                        • Primary content

                                                                        property classPrefix

                                                                        classPrefix?: string;
                                                                        • The prefix of the component 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;
                                                                            • Hidden hours on the time view

                                                                            property hideMinutes

                                                                            hideMinutes?: (minute: number, date: Date) => boolean;
                                                                            • Hidden minutes on the time view

                                                                            property hideSeconds

                                                                            hideSeconds?: (second: number, date: Date) => boolean;
                                                                            • Hidden seconds on the time view

                                                                            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 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: RangeType<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?: RangeType<Date>[];
                                                                            • 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;
                                                                            • Meridian 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 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;

                                                                                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 'yyyy-MM-dd'

                                                                                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 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: RangeType, event: React.MouseEvent) => void;
                                                                                • Called after clicking the shortcut button

                                                                                property ranges

                                                                                ranges?: RangeType[];
                                                                                • 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 shouldDisableDate

                                                                                shouldDisableDate?: DisabledDateFunction;
                                                                                • Whether a date cell is disabled

                                                                                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;
                                                                                • Meridian format

                                                                                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 WithAsProps {}

                                                                                  property vertical

                                                                                  vertical?: boolean;
                                                                                  • Vertical dividing line. Cannot be used with text.

                                                                                  interface DrawerProps

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

                                                                                    property closeButton

                                                                                    closeButton?: React.ReactNode | boolean;
                                                                                    • Custom close button

                                                                                    property placement

                                                                                    placement?: TypeAttributes.Placement4;
                                                                                    • The placement of Drawer

                                                                                    interface DropdownMenuItemProps<T = any>
                                                                                    extends WithAsProps,
                                                                                    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {}
                                                                                      active?: boolean;
                                                                                      • Active the current option

                                                                                      as?: React.ElementType;
                                                                                      • You can use a custom element for this component

                                                                                      children?: React.ReactNode;
                                                                                      • Primary content

                                                                                      disabled?: boolean;
                                                                                      • Disable the current option

                                                                                      divider?: boolean;
                                                                                      • Whether to display the divider

                                                                                        Deprecated

                                                                                        Use dedicated <Dropdown.Separator> component instead

                                                                                      eventKey?: T;
                                                                                      • The value of the current option

                                                                                      icon?: React.ReactElement<IconProps>;
                                                                                      • Set the icon

                                                                                      onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
                                                                                      • Select the callback function for the current option

                                                                                      panel?: boolean;
                                                                                      • Displays a custom panel

                                                                                      pullLeft?: boolean;
                                                                                      • The sub-level menu appears from the right side by default, and when pullLeft is set, it appears from the left.

                                                                                        Deprecated

                                                                                        Submenus are now pointing the same direction.

                                                                                      shortcut?: React.ReactNode;
                                                                                      • The dropdown item keyboard shortcut.

                                                                                        5.58.0

                                                                                      submenu?: React.ReactElement;
                                                                                      • The submenu that this menuitem controls (if exists)

                                                                                      interface DropdownMenuProps<T = string> extends StandardProps {}
                                                                                        active?: boolean;
                                                                                          activeKey?: T;
                                                                                            collapsible?: boolean;
                                                                                              disabled?: boolean;
                                                                                                eventKey?: T;
                                                                                                • Only used for setting the default expand state when it's a submenu.

                                                                                                expanded?: boolean;
                                                                                                  icon?: React.ReactElement<IconProps>;
                                                                                                  • Set the icon

                                                                                                  onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
                                                                                                    onToggle?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
                                                                                                      open?: boolean;
                                                                                                        pullLeft?: boolean;
                                                                                                        • The submenu expands from the left and defaults to the right

                                                                                                        title?: React.ReactNode;
                                                                                                        • Define the title as a submenu

                                                                                                        trigger?: 'hover' | 'click';
                                                                                                          interface DropdownProps<T = any>
                                                                                                          extends WithAsProps,
                                                                                                          Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {}
                                                                                                            activeKey?: T;
                                                                                                            • The option to activate the state, corresponding to the eventkey in the Dropdown.item

                                                                                                            defaultOpen?: boolean;
                                                                                                            • Whether dropdown is initially open

                                                                                                            disabled?: boolean;
                                                                                                            • Whether or not component is disabled

                                                                                                            eventKey?: T;
                                                                                                            • The value of the current option

                                                                                                            icon?: React.ReactElement<IconProps>;
                                                                                                            • Set the icon

                                                                                                            menuStyle?: React.CSSProperties;
                                                                                                            • The style of the menu

                                                                                                            noCaret?: boolean;
                                                                                                            • No caret variation

                                                                                                            onClose?: () => void;
                                                                                                            • The callback function that the menu closes

                                                                                                            onOpen?: () => void;
                                                                                                            • Menu Pop-up callback function

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

                                                                                                            onToggle?: (open?: boolean) => void;
                                                                                                            • Callback function for menu state switching

                                                                                                            open?: boolean;
                                                                                                            • Controlled open state

                                                                                                            placement?: TypeAttributes.Placement8;
                                                                                                            • The placement of Menu

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

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

                                                                                                            title?: React.ReactNode;
                                                                                                            • Define the title as a submenu

                                                                                                            toggleAs?: React.ElementType;
                                                                                                            • You can use a custom element type for this toggle component

                                                                                                            toggleClassName?: string;
                                                                                                            • A css class to apply to the Toggle DOM node

                                                                                                            trigger?: DropdownTrigger | DropdownTrigger[];
                                                                                                            • Triggering events

                                                                                                            interface FlexboxGridItemProps

                                                                                                            interface FlexboxGridItemProps extends WithAsProps {}

                                                                                                              property colspan

                                                                                                              colspan?: number;
                                                                                                              • spacing between grids

                                                                                                              property order

                                                                                                              order?: number;
                                                                                                              • grid orders for sorting

                                                                                                              interface FlexboxGridProps

                                                                                                              interface FlexboxGridProps extends WithAsProps {}

                                                                                                                property align

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

                                                                                                                property justify

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

                                                                                                                interface FormControlLabelProps

                                                                                                                interface FormControlLabelProps
                                                                                                                extends WithAsProps,
                                                                                                                React.LabelHTMLAttributes<HTMLLabelElement> {}

                                                                                                                  property htmlFor

                                                                                                                  htmlFor?: string;
                                                                                                                  • Attribute of the html label tag, defaults to the controlId of the FormGroup

                                                                                                                  interface FormControlProps

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

                                                                                                                    property accepter

                                                                                                                    accepter?: React.ElementType<P & FormControlBaseProps<ValueType>>;
                                                                                                                    • Proxied components

                                                                                                                    property checkAsync

                                                                                                                    checkAsync?: boolean;
                                                                                                                    • Asynchronous check value

                                                                                                                    property checkTrigger

                                                                                                                    checkTrigger?: TypeAttributes.CheckTrigger;
                                                                                                                    • 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?: TypeAttributes.Placement8;
                                                                                                                    • 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;
                                                                                                                    • Value

                                                                                                                    method onChange

                                                                                                                    onChange: (value: ValueType, event: React.SyntheticEvent) => void;
                                                                                                                    • Callback fired when data changing

                                                                                                                    interface FormErrorMessageProps

                                                                                                                    interface FormErrorMessageProps extends WithAsProps {}

                                                                                                                      property placement

                                                                                                                      placement?: TypeAttributes.Placement8;
                                                                                                                      • The placement of error messages

                                                                                                                      property show

                                                                                                                      show?: boolean;
                                                                                                                      • Show error messages

                                                                                                                      interface FormGroupProps

                                                                                                                      interface FormGroupProps extends WithAsProps {}

                                                                                                                        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 WithAsProps,
                                                                                                                        React.HTMLAttributes<HTMLSpanElement> {}

                                                                                                                          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?: TypeAttributes.CheckTrigger;
                                                                                                                              • 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 GridProps

                                                                                                                              interface GridProps extends WithAsProps {}

                                                                                                                                property fluid

                                                                                                                                fluid?: boolean;
                                                                                                                                • Fluid layout

                                                                                                                                interface HeadingProps

                                                                                                                                interface HeadingProps extends WithAsProps {}

                                                                                                                                  property level

                                                                                                                                  level?: 1 | 2 | 3 | 4 | 5 | 6;
                                                                                                                                  • Sets heading level, h1 through h6. 3

                                                                                                                                  interface HighlightProps

                                                                                                                                  interface HighlightProps extends WithAsProps {}

                                                                                                                                    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';
                                                                                                                                            • The placement of icon

                                                                                                                                            interface InlineEditProps

                                                                                                                                            interface InlineEditProps extends Omit<WithAsProps, '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' |