new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

select/usage

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Select import statement

Import the Select component and related subcomponents with: import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

Select basic usage example

Example: const items = [ { label: "Light", value: "light" }, { label: "Dark", value: "dark" }, { label: "System", value: "system" } ]; <Select placeholder="Theme"><SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{items.map((item) => (<SelectItem key={item.value} id={item.value}>{item.label}</SelectItem>))}</SelectGroup></SelectContent></Select>

Select basic usage example

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" const items = [ { label: "Light", value: "light" }, { label: "Dark", value: "dark" }, { label: "System", value: "system" }, ] <Select items={items}> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Theme" /> </SelectTrigger> <SelectContent> <SelectGroup> {items.map((item) => ( <SelectItem key={item.value} value={item.value}> {item.label} </SelectItem> ))} </SelectGroup> </SelectContent> </Select> This example shows how to build a select component with items that have labels and values, a trigger button with a placeholder, and selectable items organized in a group.

Select component imports

The Select component and its subcomponents are imported from '@/components/ui/select'. The main exports are: Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, and SelectValue.

Select basic usage example

Here is a basic Select component with a trigger, placeholder value, and grouped items: ```tsx <Select> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Theme" /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="light">Light</SelectItem> <SelectItem value="dark">Dark</SelectItem> <SelectItem value="system">System</SelectItem> </SelectGroup> </SelectContent> </Select> ``` This example shows a Select trigger with 180px width, a placeholder text "Theme", and three selectable items organized in a group.

Select with groups and separators

Use SelectGroup, SelectLabel, and SelectSeparator components together to organize Select items into grouped sections.

Give your agent this brain