AppsComponentsWebUI components for web appsReference documentation for web UI components.ButtonsButton GroupNewA group of buttons to trigger actions when clicked.ButtonA button to trigger actions when clicked.Close ButtonA button with preconfigured icon that trigger actions when clicked.Dropdown ButtonA dropdown menu with buttons to trigger actions when clicked..Link ListA group of links to trigger actions when clicked.LinkA link to trigger actions when clicked.Outline ButtonA button to trigger actions when clicked.Split ButtonA dropdown menu with buttons to trigger actions when clicked..Toggle ButtonA toggle button to trigger different actions when clicked.Toggle LinkA toggle link to trigger different actions when clicked.Containers and formsCollapsible ContainerA container to group other components with a preconfigured collapsible body area.ContainerA container to group other components together with flexible layout controls.FormA form to group and submit input fields.JSON Schema FormA JSON-defined form to group and submit input fields.Stepped ContainerA container to group other components into a series of steps.Tabbed ContainerA container to group other components into tabbed views.WizardA container for a series of steps with multiple branches and outcomes.CustomCustom ComponentA custom-built React, or HTML and JavaScript, component.HTMLNewA content area to embed HTML and CSS markup.IFrameA content area to embed a web page.DataChartA content area to display charts.FilterAn interface to define filters for Table components.JSON ExplorerA content area to display JSON data with collapsible nodes.Key ValueNewA content area for viewing and editing key-value data.Reorderable ListA content area to display a list of text items that can be reordered when dragged.TableA table to display data that can be sorted, filtered, paginated, and edited.Date and time inputsCalendar InputAn input field to select a specific date on a calendar.Date RangeAn input field to select or enter a date range.Date TimeAn input field to select or enter a date and time.DateAn input field to select or enter a date.DayA dropdown menu and input field to select or enter a day.MonthA dropdown menu and input field to select or enter a month.TimeAn input field to select or enter a time.YearA dropdown menu and input field to select or enter a year.FramesDrawerA container that slides in from the side of the viewport.ModalA container that appears above other content.SidebarA container that renders on the left-side of the viewport.Split PaneA container that divides the viewport into two resizable panes.IntegrationsAuth LoginA button to perform custom authentication for an API resource.LookerA content area to display a Looker dashboard.Mapbox MapA content area to embed a map with custom locations.Stripe Card FormAn embedded Stripe card form.TableauA content area to display a Tableau visualization.NavigationBreadcrumbsA secondary navigation menu to trigger actions.NavigationA primary navigation menu with nested items to trigger actions.Page InputAn input field to jump to a specific page of data.PaginationA navigation menu to jump to a specific page of data.StepsA group of steps that trigger actions when clicked.TabsA group of tabs that trigger actions when clicked.Number inputsCurrencyAn input field to enter a monetary number value.Editable NumberA click-to-edit input field to enter a number.Number InputAn input field to enter a number.PercentAn input field to enter a percentage number value.Phone Number InputAn input field to enter a phone number.Range SliderAn input field to select a range of number values.RatingAn input field to select a rating.SliderA slider to select a number value.PresentationAlertA message box to display important information with optional title and clickable action.Avatar GroupA group of avatars to display information and profile images for users.AvatarA content area to display user information and profile image.CalendarA content area to display calendar events.Circular ImageA content area to display a circular image.DividerA content area to display a dividing line with optional label.Event ListA content area to display a list of events.Icon TextNewA content area to display an icon with accompanying text.IconA content area to display an icon.Image GridA content area to display images in a grid layout.ImageA content area to display an image.PDFA content area to embed a PDF.Progress BarA content area to display a horizontal progress bar.Progress CircleA content area to display a circular progress bar.QR CodeA content area to display a QR code.SpacerAn empty area to add space between components.StatisticA content area to display primary and secondary number values with optional trend indicators.StatusA content area to display a status indicator.TagsA content area to display a set of tags.TextA content area to display Markdown text or HTML content.VideoA content area to display a video.RepeatablesContainer List ViewNewA flexible list of repeated components with containers.Grid ViewNewA repeatable grid of components with values that map to a list of data.List ViewNewA repeatable list of components with values that map to a list of data.Select inputsCascaderAn input field to select options using a dropdown menu or manually enter a value in a multi-level tree structure.Checkbox GroupA group of checkboxes to toggle boolean values.Checkbox TreeA group of checkboxes to toggle boolean values in a multi-level tree.CheckboxAn input field to toggle a boolean value.ListboxAn input field to select an option from a list.Multiselect ListboxAn input field to select multiple options from a list.MultiselectAn input field to select multiple options using a dropdown menu or manually enter values.Radio GroupA group of radio buttons to select a single value.Segmented ControlA segmented button to select an option from a list..SelectAn input field to select an option using a dropdown menu or manually enter a value.Switch GroupA group of switches to toggle boolean values.SwitchAn input field to toggle a boolean value.Special inputsAnnotated TextAn interface to display and annotate text.Bounding BoxAn interface to display a bounding box and tag areas of an image.ChatAn interface for AI chat conversations.Color InputAn input field to select a color.CommentAn interface to display and enter comments.File ButtonA button to select single or multiple files.File DropzoneA drag-and-drop area to select single or multiple files.File InputAn input field to select single or multiple files.MicrophoneA button to record audio.ScannerAn interface to scan a barcode or QR code using the device's camera.SignatureAn input field to digitally capture a signature as an image.TimerA button to record elapsed time.Text inputsEditable Text AreaA click-to-edit input field to enter multiple lines of text.Editable TextA click-to-edit input field to enter a single line of text.EmailAn input field to enter an email address.JSON EditorAn interface to edit and validate JSON.PasswordAn input field to enter a password.Rich Text EditorAn input field to enter text with rich formatting.Text AreaAn input field to enter multiple lines of text.Text InputAn input field to enter a single line of text.URLAn input field to enter a URL.LegacyKey ValueDisplay key-value information.List ViewA list that renders each item from an array of data using a custom-built row of components.
Collapsible ContainerA container to group other components with a preconfigured collapsible body area.
StatisticA content area to display primary and secondary number values with optional trend indicators.
CascaderAn input field to select options using a dropdown menu or manually enter a value in a multi-level tree structure.
