Fanvue API Documentation

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
} from "@fanvue/ui";
import type {
  SelectContentProps,
  SelectGroupProps,
  SelectItemProps,
  SelectItemSize,
  SelectLabelProps,
  SelectProps,
  SelectSeparatorProps,
  SelectSize,
} from "@fanvue/ui";

Examples

Default

import { Select, SelectContent, SelectItem } from "@fanvue/ui";

const COUNTRIES = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
];

const DefaultContent = () => (
  <SelectContent>
    {COUNTRIES.map((c) => (
      <SelectItem key={c.value} value={c.value}>
        {c.label}
      </SelectItem>
    ))}
  </SelectContent>
);

<Select label="Label" placeholder="Placeholder Text" helperText="Helper Text">
  <DefaultContent />
</Select>

Without Label

import { Select, SelectContent, SelectItem } from "@fanvue/ui";

const COUNTRIES = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
];

const DefaultContent = () => (
  <SelectContent>
    {COUNTRIES.map((c) => (
      <SelectItem key={c.value} value={c.value}>
        {c.label}
      </SelectItem>
    ))}
  </SelectContent>
);

<Select aria-label="Country" placeholder="Select a country">
  <DefaultContent />
</Select>

All Sizes

import { Select, SelectContent, SelectItem } from "@fanvue/ui";

const COUNTRIES = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
];

const DefaultContent = () => (
  <SelectContent>
    {COUNTRIES.map((c) => (
      <SelectItem key={c.value} value={c.value}>
        {c.label}
      </SelectItem>
    ))}
  </SelectContent>
);

<div className="flex w-[375px] flex-col gap-4">
  <Select size="48" label="Size 48" placeholder="Placeholder Text">
    <DefaultContent />
  </Select>
  <Select size="40" label="Size 40" placeholder="Placeholder Text">
    <DefaultContent />
  </Select>
  <Select size="32" label="Size 32" placeholder="Placeholder Text">
    <DefaultContent />
  </Select>
</div>

Full Width

import { Select, SelectContent, SelectItem } from "@fanvue/ui";

const COUNTRIES = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
];

const DefaultContent = () => (
  <SelectContent>
    {COUNTRIES.map((c) => (
      <SelectItem key={c.value} value={c.value}>
        {c.label}
      </SelectItem>
    ))}
  </SelectContent>
);

<Select label="Country" placeholder="Select a country" fullWidth>
  <DefaultContent />
</Select>

With Groups And Separator

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
} from "@fanvue/ui";

<Select label="Location" placeholder="Select a location">
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="us">United States</SelectItem>
      <SelectItem value="ca">Canada</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="uk">United Kingdom</SelectItem>
      <SelectItem value="de">Germany</SelectItem>
      <SelectItem value="fr">France</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Props

Select

A select field with optional label, helper/error text, and an icon slot, built on Radix UI Select for full accessibility and keyboard navigation. Pair with SelectContent and SelectItem to provide options.

string

Accessible name applied directly to the trigger button when no visible label is provided.

string

ID of an external element that labels the trigger button.

string

Wraps the className of the outermost container div.

string

boolean

default:"false"

Whether the field is in an error state.

string

Error message displayed below the trigger. Shown instead of helperText when error is true.

boolean

default:"false"

Whether the field stretches to fill its container width.

string

Helper text displayed below the trigger. Replaced by errorMessage when error is true.

string

HTML id applied to the trigger button. Auto-generated if omitted.

string

Label text displayed above the trigger. Also used as the accessible name.

ReactNode

Icon element displayed at the left side of the trigger.

((value: string) => void)

string

Placeholder shown when no value is selected.

"32" | "40" | "48"

default:"48"

Height of the select field in pixels.

string

SelectContent

The dropdown panel rendered inside a portal. Place SelectItem elements (and optionally SelectGroup / SelectLabel) as children.

boolean

SelectGroup

Groups related SelectItem elements under a SelectLabel. A direct re-export of the Radix SelectPrimitive.Group primitive. It accepts all of that primitive’s props, unchanged.

SelectItem

An individual option inside SelectContent, following the V2 Menu Item spec. Supports a leading icon or avatar, an optional two-line layout via description, and the standard hover / selected / disabled states. The selected row is marked with a trailing check indicator.

boolean

ReactNode

Leading avatar rendered in place of SelectItemProps.leadingIcon, for rows representing a person or account. Pass an Avatar sized to 24. Takes precedence over leadingIcon.

ReactNode

Optional secondary text rendered on a second line below the label.

ReactNode

Icon (or other node) rendered before the label. Ignored when SelectItemProps.avatar is set.

"32" | "40"

default:"48"

Row height. Defaults to the parent Select size (48/40 → 40, 32 → 32).

SelectLabel

A non-interactive label shown above a SelectGroup.

boolean

SelectSeparator

A horizontal rule that visually separates groups in SelectContent.

boolean

Exported types

Also exported from @fanvue/ui: SelectContentProps, SelectGroupProps, SelectItemProps, SelectItemSize, SelectLabelProps, SelectProps, SelectSeparatorProps, SelectSize.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

Select

Examples

Default

Without Label

All Sizes

Full Width

With Groups And Separator

Props

Select

SelectContent

SelectGroup

SelectItem

SelectLabel

SelectSeparator

Exported types

​Examples

​Default

​Without Label

​All Sizes

​Full Width

​With Groups And Separator

​Props

​Select

​SelectContent

​SelectGroup

​SelectItem

​SelectLabel

​SelectSeparator

​Exported types

Examples

Default

Without Label

All Sizes

Full Width

With Groups And Separator

Props

Select

SelectContent

SelectGroup

SelectItem

SelectLabel

SelectSeparator

Exported types