FormTabs

A component for creating tab-based navigation between different form sections or content areas.

Import

import FormTabs, { FormTab } from '@/components/forms/FormTabs';

Props

FormTabs Props

Prop	Type	Default	Description
`children`	`ReactElement<FormTabProps>[]`	Required	FormTab components to render as tabs
`defaultActiveTab`	`string`	First tab's title	The initially active tab
`onChange`	`(tab: string) => void`	—	Called when active tab changes
`className`	`string`	—	Additional classes for the container
`style`	`ViewStyle`	—	Custom styles for the container

FormTab Props

Prop	Type	Default	Description
`title`	`string`	Required	The text displayed in the tab
`isActive`	`boolean`	—	Whether the tab is active (handled by FormTabs)
`onPress`	`() => void`	—	Called when tab is pressed (handled by FormTabs)

Basic Usage

<FormTabs onChange={(tab) => console.log(`Switched to ${tab}`)}>
  <FormTab title="Personal" />
  <FormTab title="Address" />
  <FormTab title="Payment" />
</FormTabs>

With Default Tab

<FormTabs defaultActiveTab="Address">
  <FormTab title="Personal" />
  <FormTab title="Address" />
  <FormTab title="Payment" />
</FormTabs>

With Custom Styling

<FormTabs 
  className="my-4"
  style={{ maxWidth: 300 }}
>
  <FormTab title="Login" />
  <FormTab title="Signup" />
</FormTabs>

FormTabs

On this page