React Suite components

React Suite is a great UI component library with an extensive set of components for just about everything. The FormEngine component library is based on React Suite components.

Here is a list of the components used, as well as components that you can connect yourself.

Layout

Component	Remark
Container. Container is a layout component that can be used to wrap other components.
<Container>	Not used in the components library. Available for connection via API custom-components.
<Header>
<Footer>
<Content>
<Sidebar>
Divider. Divider are used to group content horizontally or vertically.
<Divider>	Not used in the components library. Available for connection via API custom-components.
FlexboxGrid. FlexboxGrid is a layout component that can be used to create a grid layout.
<FlexboxGrid>	Not used in the components library. Available for connection via API custom-components.
<FlexboxGrid.Item>
Grid. A Grid layout component that provides 24 grids, referring to the responsive design of Bootstrap.
<Grid>	Not used in the components library. Available for connection via API custom-components.
<Row>
<Col>
Stack. Quickly layout components through Flexbox, support vertical and horizontal stacking, support custom spacing and wrap.
<Stack>	Not used in the components library. Available for connection via API custom-components.
<Stack.Item>
<HStack>
<VStack>

Buttons

Component	Remark
Button. Commonly used operating buttons.
<Button>	Use the Button component.
IconButton. Icon button renders an icon within in a button.
<IconButton>	Not used in the components library. Available for connection via API custom-components.
Button Group. A button group gives users access to frequently performed, related actions.
<ButtonGroup>	Not used in the components library. Available for connection via API custom-components.

Status

Component	Remark
Badge. Used for buttons, numbers or status markers next to icons.
<Badge>	Not used in the components library. Available for connection via API custom-components.
Loader. A component that provides state during data loading.
<Loader>	Not used in the components library. Available for connection via API custom-components.
Message. Used to show important tips on a page.
<Message>	Use the Message component.
Notification. Used for system notifications. Generally used to push messages.
<Notification>	Not used in the components library. Available for connection via API custom-components.
Progress. Display the current progress of an operation flow.
<Progress.Line>	Use the Progress Line component.
<Progress.Circle>	Use the Progress Circle component.
Placeholder. Placeholder before component loaded.
<Placeholder.Paragraph>	Not used in the components library. Available for connection via API custom-components.
<Placeholder.Graph>
<Placeholder.Grid>
Toaster. Toaster display brief, temporary notifications of actions, errors, or other events in an application. It is often used with the Message and Notification components.
useToaster	Embedding hooks as components is not supported. Create a discussion on GitHub if you need it.

Typography

Component	Remark
Heading. A heading is a title or subtitle at the beginning of a page, section, or subsection.
<Heading>	Use the Header component. Not used in the components library. Available for connection via API custom-components.
<HeadingGroup>	Not used in the components library. Available for connection via API custom-components.
Highlight. Used to mark or highlight matched text content. For example, used to highlight search results.
<Highlight>	Not used in the components library. Available for connection via API custom-components.
Text. Text is a basic component that allows you to display text content on the page.
<Text>	Use the Static Content component. Not used in the components library. Available for connection via API custom-components.

Overlays

Component	Remark
Drawer. A panel that slides out from the edge of the page can replace Modal to present more content.
<Drawer>	Not used in the components library. Available for connection via API custom-components.
<Drawer.Body>
<Drawer.Actions>
<Drawer.Header>
<Drawer.Title>
<Drawer.Footer>
Dropdown. A drop-down menu is a navigation that uses selectpicker if you want to select a value.
<Dropdown>	Use the Dropdown component. Not used in the components library. Available for connection via API custom-components.
<Dropdown.Item>
<Dropdown.Menu>
<Dropdown.Separator>
Modal. A modal dialog box component for message prompts, acknowledgement messages, and submissions. You can use Drawer if you need to place more content.
<Modal>	Not used in the components library. Available for connection via API custom-components.
<Modal.Header>
<Modal.Title>
<Modal.Body>
<Modal.Footer>
Popover. When the mouse clicks/moves in, the pop-up pop-up box is used to display more content.
<Popover>	Not used in the components library. Available for connection via API custom-components.
<Whisper>
Tooltip. A text tip for secondary, which replaces the default title property of an HTML element.
<Tooltip>	Use the Tooltip component.
<Whisper>

Navigation

Component	Remark
Affix. 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.
<Affix>	Not used in the components library. Available for connection via API custom-components.
Breadcrumb. Used to display the current page path and quickly return to the history page.
<Breadcrumb>	Use the Breadcrumb component.
<Breadcrumb.Item>
Nav. Provides a list of various forms of navigation menus, which can be landscape and portrait layout.
<Nav>	Use the Menu component.
<Nav.Item>
<Nav.Menu>
Navbar. For navigation at the top of the page.
<Navbar>	Not used in the components library. Available for connection via API custom-components.
<Navbar.Brand>
Sidenav. An encapsulation of the Nav for the sidebar of the page.
<Sidenav>	Not used in the components library. Available for connection via API custom-components.
<Sidenav.Header>
<Sidenav.Body>
Steps. Steps is a navigation bar that guides users through the steps of a task.
<Steps>	Use the Wizard component.
<Steps.Item>	Use the Wizard step component.
Pagination. Paging navigation, used to assist long lists to load only part of the data, you can quickly switch to the specified data page.
<Pagination>	Not used in the components library. Available for connection via API custom-components.

Media and icons

Component	Remark
Avatar. Used to display an avatar or brand.
<Avatar>	Not used in the components library. Available for connection via API custom-components.
<AvatarGroup>
Icon. React Suite provides some guidance and suggestions for using icons in React Suite applications.
<Icon>	Not used in the components library. Available for connection via API custom-components.
<IconFont>
Image. Use the image component to display images.
<Image>	Use the Image component. Not used in the components library. Available for connection via API custom-components.

Form

Component	Remark
Form. A set of components and models that process form data.
<Form>	Use the fields components. Not used in the components library. Available for connection via API custom-components.
<Form.Group>
<Form.Control>
<Form.ControlLabel>
<Form.HelpText>
<Form.ErrorMessage>
Form validation.
<Form>	Use the built-in validation that builds on top of the Zod library. Use code validation and full form validation.
<Form.Control>

Data Entry

Component	Remark
AutoComplete. Provide auto-complete functionality for input box.
<AutoComplete>	Not used in the components library. Available for connection via API custom-components.
Cascader. The Cascader component displays a hierarchical list of options.
<Cascader>	Not used in the components library. Available for connection via API custom-components.
CascadeTree. CascadeTree is a component that displays tree-structured data in columns.
<CascadeTree>	Not used in the components library. Available for connection via API custom-components.
CheckPicker. Used for multiple data selection, support grouping.
<CheckPicker>	Not used in the components library. Available for connection via API custom-components.
CheckTreePicker. CheckTreePicker are supported in multiple selectors for multiple selection of complex data structures.
<CheckTreePicker>	Not used in the components library. Available for connection via API custom-components.
CheckTree. CheckTree is used to display a tree structure data and supports Checkbox selection.
<CheckTree>	Not used in the components library. Available for connection via API custom-components.
Checkbox. Check boxes are usually used in groups. Allow users to select one or more values from a set.
<Checkbox>	Use the Checkbox component.
<CheckboxGroup>	Not used in the components library. Available for connection via API custom-components.
Input. Instead of HTML native controls, input, textarea.
<Input>	Use the Input component.
<InputGroup>	Not used in the components library. Available for connection via API custom-components.
<InputGroup.Button>
<InputGroup.Addon>
<MaskedInput>	Use the Input component.
InputNumber. An input component that can only enter numbers.
<InputNumber>	Use the Number format component. Not used in the components library. Available for connection via API custom-components.
InputPicker. Single item selector with text box input.
<InputPicker>	Use the Dropdown component.
InlineEdit. An inline edit displays a custom input component that switches between reading and editing on the same page.
<InlineEdit>	Not used in the components library. Available for connection via API custom-components.
MultiCascader. The MultiCascader component is used to select multiple values from cascading options.
<MultiCascader>	Not used in the components library. Available for connection via API custom-components.
Radio. Radios are used when only one choice may be selected in a series of options.
<Radio>	Use the Radio group component.
<RadioGroup>
RadioTile. A series of selectable tile components that behave like Radio.
<RadioTile>	Not used in the components library. Available for connection via API custom-components.
<RadioTileGroup>
Rate. A rating indicates user interest in content.
<Rate>	Not used in the components library. Available for connection via API custom-components.
SelectPicker. For a single data selection, support grouping.
<SelectPicker>	Use the Dropdown component.
Slider. A Slider component for displaying current value.
<Slider>	Not used in the components library. Available for connection via API custom-components.
<RangeSlider>
TagPicker. Multi-select by tag and support new options.
<TagPicker>	Use the TagPicker component.
TagInput. The enhancement of Input supports input tags and management tags.
<TagInput>	Not used in the components library. Available for connection via API custom-components.
Toggle. Toggle switch, used for selection between two values.
<Toggle>	Use the Toggle component.
TreePicker. Selector component, tree single selector.
<TreePicker>	Not used in the components library. Available for connection via API custom-components.
Tree. Used to show a tree-structured data.
<Tree>	Not used in the components library. Available for connection via API custom-components.
Uploader. Upload files by clicking or drag-and-drop, it supports previewing the uploaded image.
<Uploader>	Use the Uploader component.

Date and Time

Component	Remark
Calendar. A component that displays data by calendar.
<Calendar>	Use the Calendar component.
DateInput. The DateInput component lets users select a date with the keyboard.
<DateInput>	Use the DatePicker component. Not used in the components library. Available for connection via API custom-components.
DatePicker. DatePicker is a highly customizable component that allows users to enter and pick dates and times in different formats.
<DatePicker>	Use the DatePicker component.
DateRangeInput. The DateRangeInput components let the user select a date range with the keyboard.
<DateRangeInput>	Not used in the components library. Available for connection via API custom-components.
DateRangePicker. DateRangePicker is used to quickly enter or pick a date and time range.
<DateRangePicker>	Not used in the components library. Available for connection via API custom-components.
TimePicker. TimePicker is a component that allows users to select a time value.
<TimePicker>	Use the TimePicker component. Not used in the components library. Available for connection via API custom-components.
TimeRangePicker. The TimeRangePicker component is used to select a time range.
<TimeRangePicker>	Not used in the components library. Available for connection via API custom-components.

Data Grid

Component	Remark
Table. A table displays rows of data.
<Table>	Not used in the components library. Available for connection via API custom-components.
<Table.Column>
<Table.ColumnGroup>
<Table.HeaderCell>
<Table.Cell>

Data Display

Component	Remark
Card. Card is a container component for displaying data, which can contain multiple child components such as images, buttons, and text. It is used to display information in a structured way.
<Card>	Not used in the components library. Available for connection via API custom-components.
<Card.Header>
<Card.Body>
<Card.Footer>
<CardGroup>
Carousel. Display a set of elements in a carousel.
<Carousel>	Not used in the components library. Available for connection via API custom-components.
List. The List component is used to display a group of data, suitable for presenting list-like content, and supports drag-and-drop sorting.
<List>	Not used in the components library. Available for connection via API custom-components.
<List.Item>
Stat. Used to display statistical data with a title and its corresponding value, emphasizing the current value of a particular attribute.
<Stat>	Not used in the components library. Available for connection via API custom-components.
<Stat.Label>
<Stat.Value>
<Stat.Trend>
<Stat.HelpText>
<StatGroup>
Tag. Tag for categorizing or markup.
<Tag>	Not used in the components library. Available for connection via API custom-components.
<TagGroup>
Timeline. Vertical display timeline.
<Timeline>	Not used in the components library. Available for connection via API custom-components.
<Timeline.Item>
Panel. A content panel that supports collapsible, shadow, and border containers.
<Panel>	Not used in the components library. Available for connection via API custom-components.
<PanelGroup>

Disclosure

Component	Remark
Accordion. The Accordion component is used to expand and collapse the content area by clicking the title. It is often used to display a large amount of content in a limited space.
<Accordion>	Not used in the components library. Available for connection via API custom-components.
<Accordion.Panel>
Tabs. Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
<Tabs>	Use the Tab component.
<Tabs.Tab>
VisuallyHidden. VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
<VisuallyHidden>	Not used in the components library. Available for connection via API custom-components.

Utilities

Component	Remark
Animation. Animation component is a set of animation components. You can achieve animation effects by configuring related properties.
<Animation.Fade>	Not used in the components library. Available for connection via API custom-components.
<Animation.Collapse>
<Animation.Bounce>
<Animation.Slide>
<Animation.Transition>
CustomProvider. Support personalized configurations such as localization, Right to Left, and themes.
<CustomProvider>	See also the localization documentation. Not used in the components library. Available for connection via API custom-components.
Whisper. The Whisper component is used to display a floating element. It is usually used with the Tooltip and Popover components.
<Whisper>	See also the Tooltip comopnent. Not used in the components library. Available for connection via API custom-components.