Docs
Select

Select

Displays a list of options for the user to pick from—triggered by a button.

Radix UIAPI Reference

Usage

import shadcn.ui.components.Select
import shadcn.ui.components.SelectContent
import shadcn.ui.components.SelectItem
import shadcn.ui.components.SelectTrigger
import shadcn.ui.components.SelectValue

Select {
    SelectTrigger {
        className = ClassName("w-[180px]")
        SelectValue { placeholder = "Theme" }
    }
    SelectContent {
        SelectItem {
            value = "light"
            +"Light"
        }
        SelectItem {
            value = "dark"
            +"Dark"
        }
        SelectItem {
            value = "system"
            +"System"
        }
    }
}
Scroll AreaSeparator