SaaS Select

SaaS-specific dropdown select

SaaSPrimitives

Overview

The Select component provides a styled dropdown menu built on Radix UI. It supports grouped options with labels, separators between groups, disabled individual items, and a fully disabled state.

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@leanicon/web-builder-library/saas";

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a plan" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="starter">Starter</SelectItem>
    <SelectItem value="pro">Pro</SelectItem>
  </SelectContent>
</Select>;

Variants

Default

<SaaSPrimitivesSelect>
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Select a plan" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SaaSPrimitivesSelectItem value="starter">Starter</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="pro">Pro</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="enterprise">Enterprise</SaaSPrimitivesSelectItem>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

Dark

<SaaSPrimitivesSelect>
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Choose option" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SaaSPrimitivesSelectItem value="option1">Option 1</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="option2">Option 2</SaaSPrimitivesSelectItem>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

With Default Value

<SaaSPrimitivesSelect defaultValue="pro">
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Select a plan" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SaaSPrimitivesSelectItem value="starter">Starter</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="pro">Pro</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="enterprise">Enterprise</SaaSPrimitivesSelectItem>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

With Groups

<SaaSPrimitivesSelect>
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Select a fruit" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SaaSPrimitivesSelectItem value="apple">Apple</SaaSPrimitivesSelectItem>
      <SaaSPrimitivesSelectItem value="banana">Banana</SaaSPrimitivesSelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SaaSPrimitivesSelectItem value="carrot">Carrot</SaaSPrimitivesSelectItem>
      <SaaSPrimitivesSelectItem value="potato">Potato</SaaSPrimitivesSelectItem>
    </SelectGroup>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

With Disabled Item

<SaaSPrimitivesSelect>
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Select a plan" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SaaSPrimitivesSelectItem value="starter">Starter</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="pro">Pro</SaaSPrimitivesSelectItem>
    <SaaSPrimitivesSelectItem value="enterprise" disabled>
      Enterprise (coming soon)
    </SaaSPrimitivesSelectItem>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

Disabled

<SaaSPrimitivesSelect disabled>
  <SaaSPrimitivesSelectTrigger>
    <SaaSPrimitivesSelectValue placeholder="Select a plan" />
  </SaaSPrimitivesSelectTrigger>
  <SaaSPrimitivesSelectContent>
    <SaaSPrimitivesSelectItem value="starter">Starter</SaaSPrimitivesSelectItem>
  </SaaSPrimitivesSelectContent>
</SaaSPrimitivesSelect>

Props

NameTypeDefaultRequiredDescription
valuestring—No
defaultValuestring—No
onValueChange((value: string) => void)—No
asChildboolean—No