Simple Select

Simplified <Select /> component for shadcn-ui

Requirements

npx shadcn-ui@latest add select

Code

/* eslint-disable react/prop-types */

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"


export default function CustomSelect({ options, value, onChange, width, placeholder = "Select" }) {
    const getValue = () => {
        return options.length > 0 ? options.find((option) => option.value === value)?.label : placeholder
    }

    return (
        <Select
            value={value}
            onValueChange={(value) => onChange(value)}
        >
            <SelectTrigger style={{ width: width }} >
                <SelectValue placeholder={getValue()} />
            </SelectTrigger>
            <SelectContent>
                {options.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                        {option.label}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>

    )
}

Usage

import CustomSelect from "@/components/extra-ui/CustomSelect";
import { useState } from "react";

export default function Page() {
    const [value, setValue] = useState('light');

    return (
        <div>
            <CustomSelect
                options={[
                    { value: 'light', label: 'Light' },
                    { value: 'dark', label: 'Dark' },
                    { value: 'system', label: 'System' },
                ]}
                value={value}
                onChange={(value) => setValue(value)}
                width='200px'
            />
        </div>
    );
}