Select

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-select

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@mijn-ui/react-select"

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Examples

Scrollable

Select Style Slots

Slot Name	Targeted Component	Purpose
`base`	`Select`	Styles the root select component.
`trigger`	`SelectTrigger`	Styles the trigger for opening the select.
`scrollUpBtn`	`SelectScrollUpButton`	Styles the scroll-up button in the select.
`scrollDownBtn`	`SelectScrollDownButton`	Styles the scroll-down button in the select.
`content`	`SelectContent`	Styles the select content container.
`viewport`	`SelectContent`	Styles the viewport of the select content.
`label`	`SelectLabel`	Styles the label within the select.
`item`	`SelectItem`	Styles individual select items.
`itemIndicator`	`SelectItem`	Styles the indicator for selected items.
`separator`	`SelectSeparator`	Styles the separator between select items.

Installation

Usage

Examples

Scrollable

Select Style Slots

On this page