# TabsProps

Source: /tuil/docs/reference/components/navigation/tabs-props
Locale: en

TabsProps component contract.



{/* Generated by tooling/docs/generate-reference.ts. */}

## Type [#type]

```ts
export interface TabsProps
  extends CommonComponentProps,
    SlottedComponentProps<NavigationSlots> {
  readonly items: readonly NavigationItem[];
  readonly value?: string;
  readonly defaultValue?: string;
  readonly onValueChange?: (value: string) => void | Promise<void>;
  readonly activationMode?: "automatic" | "manual";
}
```

## Members [#members]

| Member           | Type                                                                                                                                                                               | Required | Description                                                                                                                                                                                                                  | Related types                                                                                                                                                                                |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `items`          | `readonly NavigationItem[]`                                                                                                                                                        | Yes      | The `items` member uses the `readonly NavigationItem[]` contract.                                                                                                                                                            | —                                                                                                                                                                                            |
| `value`          | `string \| undefined`                                                                                                                                                              | No       | The `value` member uses the `string \| undefined` contract.                                                                                                                                                                  | —                                                                                                                                                                                            |
| `defaultValue`   | `string \| undefined`                                                                                                                                                              | No       | The `defaultValue` member uses the `string \| undefined` contract.                                                                                                                                                           | —                                                                                                                                                                                            |
| `onValueChange`  | `((value: string) => void \| Promise<void>) \| undefined`                                                                                                                          | No       | The `onValueChange` member uses the `((value: string) => void \| Promise<void>) \| undefined` contract.                                                                                                                      | —                                                                                                                                                                                            |
| `activationMode` | `"automatic" \| "manual" \| undefined`                                                                                                                                             | No       | The `activationMode` member uses the `"automatic" \| "manual" \| undefined` contract.                                                                                                                                        | —                                                                                                                                                                                            |
| `variant`        | `string \| undefined`                                                                                                                                                              | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                                                                                | —                                                                                                                                                                                            |
| `size`           | `"sm" \| "md" \| "lg" \| undefined`                                                                                                                                                | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                                                                     | —                                                                                                                                                                                            |
| `unstyled`       | `boolean \| undefined`                                                                                                                                                             | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `className`      | `string \| undefined`                                                                                                                                                              | No       | The `className` member uses the `string \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `layout`         | `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined`                                                                                                   | No       | The `layout` member uses the `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined` contract.                                                                                                      | —                                                                                                                                                                                            |
| `id`             | `string \| undefined`                                                                                                                                                              | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                                                                     | —                                                                                                                                                                                            |
| `testId`         | `string \| undefined`                                                                                                                                                              | No       | The `testId` member uses the `string \| undefined` contract.                                                                                                                                                                 | —                                                                                                                                                                                            |
| `role`           | `SemanticRole \| undefined`                                                                                                                                                        | No       | The `role` member uses the `SemanticRole \| undefined` contract.                                                                                                                                                             | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                            |
| `label`          | `string \| undefined`                                                                                                                                                              | No       | The `label` member uses the `string \| undefined` contract.                                                                                                                                                                  | —                                                                                                                                                                                            |
| `description`    | `string \| undefined`                                                                                                                                                              | No       | The `description` member uses the `string \| undefined` contract.                                                                                                                                                            | —                                                                                                                                                                                            |
| `disabled`       | `boolean \| undefined`                                                                                                                                                             | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `readOnly`       | `boolean \| undefined`                                                                                                                                                             | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `selected`       | `boolean \| undefined`                                                                                                                                                             | No       | The `selected` member uses the `boolean \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `checked`        | `boolean \| undefined`                                                                                                                                                             | No       | The `checked` member uses the `boolean \| undefined` contract.                                                                                                                                                               | —                                                                                                                                                                                            |
| `expanded`       | `boolean \| undefined`                                                                                                                                                             | No       | The `expanded` member uses the `boolean \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `valueText`      | `string \| undefined`                                                                                                                                                              | No       | The `valueText` member uses the `string \| undefined` contract.                                                                                                                                                              | —                                                                                                                                                                                            |
| `slots`          | `Partial<SlotComponents<&#123; root: import("ink").BoxProps; list: import("ink").BoxProps; item: import("ink").TextProps; panel: import("ink").BoxProps; &#125;>> \| undefined`    | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; list: import("ink").BoxProps; item: import("ink").TextProps; panel: import("ink").BoxProps; &#125;>> \| undefined` contract.        | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`      | `Partial<SlotProps<&#123; root: import("ink").BoxProps; list: import("ink").BoxProps; item: import("ink").TextProps; panel: import("ink").BoxProps; &#125;, object>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; list: import("ink").BoxProps; item: import("ink").TextProps; panel: import("ink").BoxProps; &#125;, object>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

## Source [#source]

[View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/registry/navigation/navigation.tsx)