Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Under the Hood

The RzTabs component family is powered by a lightweight Alpine.js controller that manages state, selection, and keyboard navigation in a fully CSP-compliant manner.

Demo

The main demo showcases a common use case for tabs: organizing user settings into "Account" and "Password" sections within a card.

Source

                        <EditForm Model="_demoModel">
                            <DataAnnotationsValidator />
                            <RzInitialValidator />
	                        <RzTabs DefaultValue="account">
		                        <TabsList>
			                        <TabsTrigger Value="account">Account</TabsTrigger>
			                        <TabsTrigger Value="password">Password</TabsTrigger>
		                        </TabsList>
		                        <TabsContent Value="account">
			                        <RzCard>
				                        <CardHeader>
					                        <CardTitle>Account</CardTitle>
					                        <CardDescription>
						                        Make changes to your account here. Click save when you're done.
					                        </CardDescription>
				                        </CardHeader>
				                        <CardContent>
                                            <RzFieldSet>
                                                <RzFieldGroup>
                                                    <Field>
                                                        <FieldLabel For="@(() => _demoModel.Name)" />
                                                        <RzInputText For="@(() => _demoModel.Name)" />
                                                        <FieldError><RzValidationMessage For="@(() => _demoModel.Name)" /></FieldError>
                                                    </Field>
                                                    <Field>
                                                        <FieldLabel For="@(() => _demoModel.Username)" />
                                                        <RzInputText For="@(() => _demoModel.Username)" />
                                                        <FieldError><RzValidationMessage For="@(() => _demoModel.Username)" /></FieldError>
                                                    </Field>
                                                </RzFieldGroup>
                                            </RzFieldSet>
				                        </CardContent>
				                        <CardFooter>
					                        <RzButton>Save changes</RzButton>
				                        </CardFooter>
			                        </RzCard>
		                        </TabsContent>
		                        <TabsContent Value="password">
			                        <RzCard>
				                        <CardHeader>
					                        <CardTitle>Password</CardTitle>
					                        <CardDescription>
						                        Change your password here. After saving, you'll be logged out.
					                        </CardDescription>
				                        </CardHeader>
				                        <CardContent>
                                            <RzFieldSet>
                                                <RzFieldGroup>
                                                    <Field>
                                                        <FieldLabel For="@(() => _demoModel.CurrentPassword)" />
                                                        <RzInputText For="@(() => _demoModel.CurrentPassword)" Role="
" />
                                                        <FieldError><RzValidationMessage For="@(() => _demoModel.CurrentPassword)" /></FieldError>
                                                    </Field>
                                                    <Field>
                                                        <FieldLabel For="@(() => _demoModel.NewPassword)" />
                                                        <RzInputText For="@(() => _demoModel.NewPassword)" Role="
" />
                                                        <FieldError><RzValidationMessage For="@(() => _demoModel.NewPassword)" /></FieldError>
                                                    </Field>
                                                </RzFieldGroup>
                                            </RzFieldSet>
				                        </CardContent>
				                        <CardFooter>
					                        <RzButton>Save password</RzButton>
				                        </CardFooter>
			                        </RzCard>
		                        </TabsContent>
	                        </RzTabs>
                        </EditForm>

Usage

Here is the basic structure for creating a set of tabs.

Source

<RzTabs DefaultValue="account" class="w-[400px]">
  <TabsList>
    <TabsTrigger Value="account">Account</TabsTrigger>
    <TabsTrigger Value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent Value="account">Make changes to your account here.</TabsContent>
  <TabsContent Value="password">Change your password here.</TabsContent>
</RzTabs>

Component Parameters

The following tables summarize the main parameters for each component in the Tabs family.

RzTabs

Property	Type	Default	Description
`DefaultValue`	`string?`	First tab	The value of the tab that should be active on initial render.
`ChildContent`	`RenderFragment`	Required	The content, which should include a `TabsList` and `TabsContent` components.

TabsList

Property	Type	Default	Description
`ChildContent`	`RenderFragment`	Required	The content, which should be a series of `TabsTrigger` components.
`AriaLabel`	`string?`	"Tabs"	The accessible name for the tab list.
`Orientation`	`Orientation`	`Horizontal`	The orientation of the tab list, affecting keyboard navigation.

TabsTrigger

Property	Type	Default	Description
`Value`	`string`	Required	A unique value that associates the trigger with a `TabsContent`.
`Disabled`	`bool`	`false`	If true, the trigger is disabled and cannot be selected.
`AsChild`	`bool`	`false`	Merges behavior into a single child element instead of rendering a button.

TabsContent

Property	Type	Default	Description
`Value`	`string`	Required	A unique value that associates the content with a `TabsTrigger`.

Alpine API

This page uses the rzTabs Alpine x-data component.

Method	Parameters	Description
`refreshTriggers`	`—`	Refreshes trigger registrations and selected state handling.