Layout

Tab

A single tab inside fandry-tabs.

fandry-tab

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`value`	`string`	`''`	Required. Matches the `value` of one fandry-tab-panel, and is what fandry-tabs reports in `change`.
`disabled`	`boolean`	`false`	Cannot be selected, and the arrow keys skip it.
`selected`	`boolean`	`false`	Set by fandry-tabs from its `value`; read it, but set `value` on fandry-tabs to change the tab.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`selected`	The chosen option, a selected table row, or the selected tab.
`disabled`	A control, option or item that cannot be used.

<!-- template -->
<div class="brand">
  <fandry-tabs value="account" aria-label="Settings">
    <fandry-tab slot="tab" value="account">Account</fandry-tab>
    <fandry-tab slot="tab" value="billing">Billing</fandry-tab>
    <fandry-tab slot="tab" value="team">Team</fandry-tab>
    <fandry-tab-panel value="account">
      <fandry-text>Update your name, email and password.</fandry-text>
    </fandry-tab-panel>
    <fandry-tab-panel value="billing">
      <fandry-text>Manage your plan and payment method.</fandry-text>
    </fandry-tab-panel>
    <fandry-tab-panel value="team">
      <fandry-text>Invite people to your workspace.</fandry-text>
    </fandry-tab-panel>
  </fandry-tabs>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
}

fandry-tabs::part(list) {
  gap: 0.5rem;
  box-shadow: none;
}

fandry-tab::part(base) {
  border-radius: 999px;
  border-bottom-color: transparent;
}

fandry-tab::part(base selected) {
  background: hsl(160 84% 26%);
  color: white;
}

Code

Link to section Code

<fandry-tab slot="tab" value="billing">Billing</fandry-tab>