Wensity

Select

A refined select for filters, settings, and onboarding choices.

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>
  );
}