A component for toggling between related panels on the same page.
Base UI
This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs.
Groups the tabs and the corresponding panels. Renders a <div> element.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| defaultValue | any | 0 | No |
| value | any | - | No |
| onValueChange | ((value) => void) | - | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
Groups the individual tab buttons. Renders a <div> element.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| activateOnFocus | boolean | false | No |
| loop | boolean | false | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
An individual interactive tab button that toggles the corresponding panel. Renders a <button> element.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| value | string | - | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
A panel displayed when the corresponding tab is active. Renders a <div> element.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| value | string | - | No |
| keepMounted | boolean | false | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |