Tabs · ui.voila.dev

Review upcoming projects and their staffing status.

<Tabs.Root defaultValue="projects">
	<Tabs.List>
		<Tabs.Trigger value="projects">Projects</Tabs.Trigger>
		<Tabs.Trigger value="freelancers">Freelancers</Tabs.Trigger>
	</Tabs.List>
	<Tabs.Content value="projects">…</Tabs.Content>
	<Tabs.Content value="freelancers">…</Tabs.Content>
</Tabs.Root>

variant="line" on the list swaps the filled rail for an underline, which sits better directly under a page header.

Review upcoming projects and their staffing status.

API

Tabs.Root

Prop	Type	Default
`className`	`string` \| `((state: TabsRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`defaultValue`	`any`	—	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`onValueChange`	`((value: any, eventDetails: TabsRootChangeEventDetails) => void)`	—	Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect.
`orientation`	`Orientation`	—	The component orientation (layout flow direction).
`render`	`ComponentRenderFn<HTMLProps, TabsRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: TabsRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`any`	—	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.

Plus the DOM props of the element it renders. Source: tabs/components/tabs-root.tsx.

Tabs.Content

Prop	Type	Default
`value`	`any`	required	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
`className`	`string` \| `((state: TabsPanelState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`keepMounted`	`boolean`	—	Whether to keep the HTML element in the DOM while the panel is hidden.
`render`	`ComponentRenderFn<HTMLProps, TabsPanelState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: TabsPanelState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: tabs/components/tabs-content.tsx.

Tabs.List

Prop	Type	Default
`variant`	`"default" \| "line"`	`"default"`	`default` sits the tabs in a filled track; `line` drops the track and marks the active tab with an underline.
`activateOnFocus`	`boolean`	—	Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using Enter or Space key press.
`className`	`string` \| `((state: TabsListState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`loopFocus`	`boolean`	—	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`render`	`ComponentRenderFn<HTMLProps, TabsListState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: TabsListState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: tabs/components/tabs-list.tsx.

Tabs.Trigger

Prop	Type	Default
`value`	`any`	required	The value of the Tab.
`className`	`string` \| `((state: TabsTabState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`disabled`	`boolean`	—	Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, TabsTabState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: TabsTabState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: tabs/components/tabs-trigger.tsx.