• Logo

    Elementra UI

    v0.1.7 - Documentation
  1. Docs
  3. Components/Select/

Select

A customizable dropdown select component for choosing from a set of options.

1Installation

npm i elementra-ui

2Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

3Basic Usage

Import the Select component and use it in your application.

import { Select, SelectOption } from "@/components/ui/select";

export default function BasicSelect() {
  return (
    <Select placeholder="Choose an option">
      <SelectOption value="option1">Option 1</SelectOption>
      <SelectOption value="option2">Option 2</SelectOption>
      <SelectOption value="option3">Option 3</SelectOption>
    </Select>
  );
}

4Controlled Usage

Use the Select component with state to control its value.

import { Select, SelectOption } from "@/components/ui/select";
import { useState } from "react";

export default function ControlledSelect() {
  const [selected, setSelected] = useState(null);
  
  return (
    <div>
      <Select 
        value={selected}
        onChange={(value) => setSelected(value)}
        placeholder="Choose an option"
      >
        <SelectOption value="option1">Option 1</SelectOption>
        <SelectOption value="option2">Option 2</SelectOption>
        <SelectOption value="option3">Option 3</SelectOption>
      </Select>
      
      <p className="mt-2">Selected value: {selected || "None"}</p>
    </div>
  );
}