Preview live, install via shadcn or copy the source.
This will install the component and its dependencies automatically.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| options | GsapToggleOption[] | — | No | Array of options with value, label and optional badge. Defaults to Quarterly / Yearly with -33% badge. |
| value | string | — | No | Controlled selected value. |
| defaultValue | string | — | No | Initial value for uncontrolled usage. |
| onValueChange | (value: string) => void | — | No | Callback when selection changes. |
| size | "sm" | "default" | "lg" | default | No | Size variant controlling padding and typography. |
| equalWidth | boolean | false | No | When true each segment shares equal width (flex-1). |
| fullWidth | boolean | false | No | Stretch container to full width. |
| disabled | boolean | false | No | Disable the whole control. |
| animateScale | boolean | true | No | Subtle scale animation on active label. |
| duration | number | 0.38 | No | GSAP duration for pill slide. |
| ease | string | power3.inOut | No | GSAP easing for pill slide. |
| containerClassName | string | — | No | Extra classes for the outer pill track container. |
| pillClassName | string | — | No | Classes for the sliding active pill (default bg-black). |
| itemClassName | string | — | No | Base classes for each option button. |
| activeItemClassName | string | — | No | Classes applied when option is active. |
| inactiveItemClassName | string | — | No | Classes applied when inactive. |
| badgeClassName | string | — | No | Base badge classes. |
| badgeActiveClassName | string | — | No | Badge classes when active. |
| badgeInactiveClassName | string | — | No | Badge classes when inactive. |
| ariaLabel | string | — | No | Accessible label for the radiogroup. |
| name | string | — | No | Name attribute for radio semantics. |
| className | string | — | No | Additional classes merged into the container. |