v2.0.0
Form

Select

Provides a custom single-value selection control.

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@line/abc-def-react/select";
<script setup lang="ts">
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@line/abc-def-vue/select";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

React shadcnVue shadcn

Basic usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@line/abc-def-react/select";

export function Example() {
  return (
    <Select defaultValue="semantic">
      <SelectTrigger><SelectValue placeholder="Layer" /></SelectTrigger>
      <SelectContent>
        <SelectItem value="semantic">Semantic</SelectItem>
        <SelectItem value="component">Component</SelectItem>
      </SelectContent>
    </Select>
  );
}
<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@line/abc-def-vue/select";
</script>

<template>
  <Select default-value="semantic">
    <SelectTrigger>
      <SelectValue placeholder="Layer" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="semantic">Semantic</SelectItem>
      <SelectItem value="component">Component</SelectItem>
    </SelectContent>
  </Select>
</template>

Component tokens

Component TokenSemantic TokenDefault Primitive Token
--select-trigger-ring--ring--color-zinc-400
--select-trigger-bgLiteral valuetransparent
--select-trigger-bg-hoverLiteral valuetransparent
--select-trigger-border--border-input--color-zinc-200
--select-trigger-border-destructive--destructive--color-red-50
--select-trigger-fg-placeholder--muted-foreground--color-zinc-500
--select-trigger-icon-fg--muted-foreground--color-zinc-500
--select-content-bg--popover--color-white
--select-content-fg--popover-foreground--color-zinc-950
--select-content-border--foreground--color-zinc-950
--select-label-fg--muted-foreground--color-zinc-500
--select-item-bg-focus--accent--color-zinc-100
--select-item-fg-focus--accent-foreground--color-zinc-900
--select-separator-bg--border--color-zinc-200
--select-scroll-button-bg--popover--color-white

Composition exports

SelectSelectTriggerSelectContentSelectItemSelectValue

Usage notes

  • Use for compact controlled selection.
  • Prefer combobox when search is needed.
  • Related component tokens use the `select` token group in `@line/abc-def-styles/css`.