Wensity

Select

A non-modal select primitive for app forms, filters, settings, and onboarding flows. It includes field, filled, and pill trigger variants, labels, hints, error state, disabled state, disabled options, grouped options, option descriptions, leading/trailing slots, and controlled/uncontrolled state.

selectdropdownformfieldfiltersettingsoptionsgroupedcontrolled
Loading preview...

Examples

Practical examples and common states for the same installable component.

Filled

A softer trigger for dense settings panels.

examples/select-filled.tsx
import {
  IconBolt,
  IconBuildingSkyscraper,
  IconRocket,
} from "@tabler/icons-react";
import { Select } from "@/components/wensity/select";


export function SelectFilled() {
  return (
    <Select
      variant="filled"
      label="Plan"
      defaultValue="team"
      options={[
        {
          value: "free",
          label: "Free",
          description: "Prototype with public examples.",
          leading: <IconRocket stroke={1.75} />,
        },
        {
          value: "pro",
          label: "Pro",
          description: "Use source files in production.",
          leading: <IconBolt stroke={1.75} />,
        },
        {
          value: "team",
          label: "Team",
          description: "Seats, shared billing, and API tokens.",
          leading: <IconBuildingSkyscraper stroke={1.75} />,
        },
      ]}
    />
  );
}

Pill

Compact select triggers for filters and toolbars.

examples/select-pill.tsx
import { IconChartBar, IconFilter } from "@tabler/icons-react";
import { Select } from "@/components/wensity/select";


export function SelectPill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Select
        variant="pill"
        fullWidth={false}
        defaultValue="all"
        leadingIcon={<IconFilter stroke={1.75} />}
        options={[
          { value: "all", label: "All components" },
          { value: "free", label: "Free" },
          { value: "pro", label: "Pro" },
        ]}
      />
      <Select
        variant="pill"
        fullWidth={false}
        defaultValue="popular"
        leadingIcon={<IconChartBar stroke={1.75} />}
        options={[
          { value: "popular", label: "Popular" },
          { value: "newest", label: "Newest" },
          { value: "updated", label: "Updated" },
        ]}
      />
    </div>
  );
}

Grouped

Grouped options with disabled choices and descriptions.

examples/select-grouped.tsx
import {
  IconCreditCard,
  IconShieldLock,
  IconUser,
  IconUsers,
} from "@tabler/icons-react";
import { Select } from "@/components/wensity/select";


export function SelectGrouped() {
  return (
    <Select
      label="Role"
      defaultValue="developer"
      options={[
        {
          label: "Workspace",
          options: [
            {
              value: "owner",
              label: "Owner",
              description: "Full access to billing, members, and tokens.",
              leading: <IconShieldLock stroke={1.75} />,
            },
            {
              value: "admin",
              label: "Admin",
              description: "Manage members and publish components.",
              leading: <IconUsers stroke={1.75} />,
            },
          ],
        },
        {
          label: "Limited",
          options: [
            {
              value: "developer",
              label: "Developer",
              description: "Create tokens and download source files.",
              leading: <IconUser stroke={1.75} />,
            },
            {
              value: "billing",
              label: "Billing only",
              description: "View invoices and payment methods.",
              leading: <IconCreditCard stroke={1.75} />,
              disabled: true,
            },
          ],
        },
      ]}
    />
  );
}

Controlled

Controlled value for settings that mirror app state.

examples/select-controlled.tsx
"use client";


import * as React from "react";
import { Select } from "@/components/wensity/select";


export function SelectControlled() {
  const [value, setValue] = React.useState("weekly");


  return (
    <Select
      value={value}
      onValueChange={setValue}
      variant="filled"
      label="Email frequency"
      options={[
        { value: "instant", label: "Instant" },
        { value: "daily", label: "Daily" },
        { value: "weekly", label: "Weekly" },
        { value: "never", label: "Never" },
      ]}
    />
  );
}

Error

Validation state for required select fields.

examples/select-error.tsx
import { Select } from "@/components/wensity/select";


export function SelectError() {
  return (
    <Select
      label="Workspace role"
      placeholder="Choose a role"
      error="Select a role before sending the invite."
      options={[
        { value: "owner", label: "Owner" },
        { value: "admin", label: "Admin" },
        { value: "developer", label: "Developer" },
      ]}
    />
  );
}

Disabled

Disabled triggers and disabled options remain readable.

examples/select-disabled.tsx
import { IconLock } from "@tabler/icons-react";
import { Select } from "@/components/wensity/select";


export function SelectDisabled() {
  return (
    <div className="space-y-4">
      <Select
        label="Security policy"
        defaultValue="strict"
        disabled
        leadingIcon={<IconLock stroke={1.75} />}
        options={[
          { value: "standard", label: "Standard" },
          { value: "strict", label: "Strict" },
        ]}
      />
      <Select
        label="Billing contact"
        defaultValue="primary"
        options={[
          { value: "primary", label: "Primary card" },
          { value: "invoice", label: "Invoice", disabled: true },
        ]}
      />
    </div>
  );
}