Tab Selector

A selector token component with Select behavior and tab-like visuals for icon + label + chevron layouts.

Docs API Reference

Loading...

Installation

npx @libreapps/ui@latest add tab-selector

Usage

import { TabSelector } from "@libreapps/ui/tab-selector"

<TabSelector
  defaultValue="ai-services"
  options={[
    { value: "ai-services", label: "AI Services", icon: <Sparkles className="h-4 w-4" /> },
    {
      value: "financial-services",
      label: "Financial Services",
      icon: <HandCoins className="h-4 w-4" />,
    },
  ]}
/>

Why Tab Selector

Uses Select semantics and keyboard behavior.
Uses tab-like token visuals.
Keeps icon and chevron inside bounds.
Truncates long labels instead of breaking layout.

API

`TabSelector`

options: array of { value, label, icon?, disabled? }
value, defaultValue, onValueChange
placeholder
triggerClassName, contentClassName, itemClassName
iconClassName, labelClassName

Example

Loading...