Tabs

A component for toggling between related panels on the same page.

API reference

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