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

Radix Primitives · all subjects

select

63 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Select with placeholder example

Example showing a Select with placeholder and no initial value: <Select.Root><Select.Trigger placeholder="Pick a fruit" /><Select.Content><Select.Group><Select.Label>Fruits</Select.Label><Select.Item value="orange">Orange</Select.Item><Select.Item value="apple">Apple</Select.Item><Select.Item value="grape" disabled>Grape</Select.Item></Select.Group><Select.Separator /><Select.Group><Select.Label>Vegetables</Select.Label><Select.Item value="carrot">Carrot</Select.Item><Select.Item value="potato">Potato</Select.Item></Select.Group></Select.Content></Select.Root>

Select with controlled value and custom rendering

Example showing controlled Select with manual value rendering for SSR: const data = { apple: "Apple", orange: "Orange" }; const [value, setValue] = React.useState("apple"); return <Select.Root value={value} onValueChange={setValue}><Select.Trigger>{data[value]}</Select.Trigger><Select.Content><Select.Item value="apple">Apple</Select.Item><Select.Item value="orange">Orange</Select.Item></Select.Content></Select.Root>;

Select with icon in Trigger example

Example showing Select with controlled value and custom Trigger rendering with icon: const data = { light: { label: "Light", icon: <SunIcon /> }, dark: { label: "Dark", icon: <MoonIcon /> } }; const [value, setValue] = React.useState("light"); return <Select.Root value={value} onValueChange={setValue}><Select.Trigger><Flex as="span" align="center" gap="2">{data[value].icon}{data[value].label}</Flex></Select.Trigger><Select.Content position="popper"><Select.Item value="light">Light</Select.Item><Select.Item value="dark">Dark</Select.Item></Select.Content></Select.Root>;

Give your agent this brain