Select
Displays a list of options for the user to pick from—triggered by a button.
import Select from '@dinui/react/select'
export default function SelectDemo() { return ( <Select> <Select.Trigger className="w-[180px]"> <Select.Value placeholder="Select a fruit" /> </Select.Trigger> <Select.Content> <Select.Group> <Select.Label>Fruits</Select.Label>
<Select.Item value="apple">Apple</Select.Item> <Select.Item value="banana" disabled> Banana </Select.Item> <Select.Item value="blueberry">Blueberry</Select.Item> <Select.Item value="grapes">Grapes</Select.Item> <Select.Item value="pineapple">Pineapple</Select.Item> </Select.Group> </Select.Content> </Select> )}Scrollable
import Select from '@dinui/react/select'
export default function SelectScrollable() { return ( <Select> <Select.Trigger className="w-[280px]"> <Select.Value placeholder="Select a timezone" /> </Select.Trigger> <Select.Content> <Select.Group> <Select.Label>North America</Select.Label> <Select.Item value="est">Eastern Standard Time (EST)</Select.Item> <Select.Item value="cst">Central Standard Time (CST)</Select.Item> <Select.Item value="mst">Mountain Standard Time (MST)</Select.Item> <Select.Item value="pst">Pacific Standard Time (PST)</Select.Item> <Select.Item value="akst">Alaska Standard Time (AKST)</Select.Item> <Select.Item value="hst">Hawaii Standard Time (HST)</Select.Item> </Select.Group> <Select.Group> <Select.Label>Europe & Africa</Select.Label> <Select.Item value="gmt">Greenwich Mean Time (GMT)</Select.Item> <Select.Item value="cet">Central European Time (CET)</Select.Item> <Select.Item value="eet">Eastern European Time (EET)</Select.Item> <Select.Item value="west">Western European Summer Time (WEST)</Select.Item> <Select.Item value="cat">Central Africa Time (CAT)</Select.Item> <Select.Item value="eat">East Africa Time (EAT)</Select.Item> </Select.Group> <Select.Group> <Select.Label>Asia</Select.Label> <Select.Item value="msk">Moscow Time (MSK)</Select.Item> <Select.Item value="ist">India Standard Time (IST)</Select.Item> <Select.Item value="cst_china">China Standard Time (CST)</Select.Item> <Select.Item value="jst">Japan Standard Time (JST)</Select.Item> <Select.Item value="kst">Korea Standard Time (KST)</Select.Item> <Select.Item value="ist_indonesia">Indonesia Central Standard Time (WITA)</Select.Item> </Select.Group> <Select.Group> <Select.Label>Australia & Pacific</Select.Label> <Select.Item value="awst">Australian Western Standard Time (AWST)</Select.Item> <Select.Item value="acst">Australian Central Standard Time (ACST)</Select.Item> <Select.Item value="aest">Australian Eastern Standard Time (AEST)</Select.Item> <Select.Item value="nzst">New Zealand Standard Time (NZST)</Select.Item> <Select.Item value="fjt">Fiji Time (FJT)</Select.Item> </Select.Group> <Select.Separator /> <Select.Group> <Select.Label>South America</Select.Label> <Select.Item value="art">Argentina Time (ART)</Select.Item> <Select.Item value="bot">Bolivia Time (BOT)</Select.Item> <Select.Item value="brt">Brasilia Time (BRT)</Select.Item> <Select.Item value="clt">Chile Standard Time (CLT)</Select.Item> </Select.Group> </Select.Content> </Select> )}Form
'use client'
import Button from '@dinui/react/button'import Form, { useForm } from '@dinui/react/form'import Select from '@dinui/react/select'import { zodResolver } from '@hookform/resolvers/zod'import { z } from 'zod'
const FormSchema = z.object({ email: z .string({ required_error: 'Please select an email to display.', }) .email(),})
export default function SelectForm() { const form = useForm<z.infer<typeof FormSchema>>({ resolver: zodResolver(FormSchema), })
function onSubmit(data: z.infer<typeof FormSchema>) { alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`) }
return ( <Form form={form} onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6"> <Form.Field control={form.control} name="email" render={({ field }) => ( <Form.Item> <Form.Label>Email</Form.Label> <Select onValueChange={field.onChange} defaultValue={field.value}> <Form.Control> <Select.Trigger> <Select.Value placeholder="Select a verified email to display" /> </Select.Trigger> </Form.Control> <Select.Content> <Select.Item value="m@example.com">m@example.com</Select.Item> <Select.Item value="m@google.com">m@google.com</Select.Item> <Select.Item value="m@support.com">m@support.com</Select.Item> </Select.Content> </Select> <Form.Description> You can manage email addresses in your <a href="#">email settings</a>. </Form.Description> <Form.ErrorMessage /> </Form.Item> )} /> <Button type="submit">Submit</Button> </Form> )}Installation
-
Follow Installation Guide
To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies. -
All done
You now can start using this component in your project.
-
Follow Installation Guide
To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies. -
Run the following command in your project
Terminal window npx @dinui/cli@latest add selectTerminal window yarn dlx @dinui/cli@latest add selectTerminal window pnpm dlx @dinui/cli@latest add selectTerminal window bunx @dinui/cli@latest add select -
Update the import paths to match your project setup
-
All done
You now can start using this component in your project.
-
Follow Installation Guide
To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies. -
Install dependencies
Terminal window npm install @radix-ui/react-select @tabler/icons-react tailwind-variants type-festTerminal window yarn add @radix-ui/react-select @tabler/icons-react tailwind-variants type-festTerminal window pnpm add @radix-ui/react-select @tabler/icons-react tailwind-variants type-festTerminal window bun add @radix-ui/react-select @tabler/icons-react tailwind-variants type-fest -
Copy and paste the following code into your project
'use client'import { button } from '@dinui/react/button'import { separator } from '@dinui/react/separator'import * as SelectPrimitive from '@radix-ui/react-select'import { IconSelector, IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'import { forwardRef } from 'react'import { tv } from 'tailwind-variants'import type { Merge } from 'type-fest'const select = tv({slots: {trigger: button({ variant: 'outline' }).root({ className: 'justify-between' }),triggerIcon: button({ variant: 'outline' }).rightIcon({ className: 'text-fg-weaker' }),scrollUpButton: button({ variant: 'ghost', size: 'sm' }).root(),scrollUpButtonIcon: button({ variant: 'ghost', size: 'sm' }).icon(),scrollDownButton: button({ variant: 'ghost', size: 'sm' }).root(),scrollDownButtonIcon: button({ variant: 'ghost', size: 'sm' }).icon(),content: ['relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md','border bg-bg--contrast shadow-md','data-[state=open]:animate-in data-[state=closed]:animate-out','data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0','data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95','data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2','data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',],viewport: 'p-1',label: 'px-2 py-1.5 text-sm font-semibold',item: button({ variant: 'ghost', size: 'sm' }).root({className: ['flex justify-between w-full px-2 text-sm outline-none','data-[disabled]:pointer-events-none data-[disabled]:opacity-50',],}),itemIndicator: button({ variant: 'ghost', size: 'sm' }).rightIcon(),separator: separator({ variant: 'weak' }).root({ className: '-mx-1 my-1' }),},variants: {position: {'popper': {content:'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',viewport:'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',},'item-aligned': null,},},defaultVariants: {position: 'item-aligned',},})const SelectTrigger = forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>,Merge<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,{iconProps?: React.ComponentProps<typeof IconSelector>}>>(({ iconProps, children, ...props }, ref) => {const { trigger, triggerIcon } = select()return (<SelectPrimitive.Trigger{...props}ref={ref}className={trigger({ className: props.className })}>{children}<SelectPrimitive.Icon asChild><IconSelector {...iconProps} className={triggerIcon({ className: iconProps?.className })} /></SelectPrimitive.Icon></SelectPrimitive.Trigger>)})SelectTrigger.displayName = SelectPrimitive.Trigger.displayNameconst SelectScrollUpButton = forwardRef<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,Merge<React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>,{iconProps?: React.ComponentProps<typeof IconChevronUp>}>>(({ iconProps, ...props }, ref) => {const { scrollUpButton, scrollUpButtonIcon } = select()return (<SelectPrimitive.ScrollUpButton{...props}ref={ref}className={scrollUpButton({ className: props.className })}><IconChevronUp{...iconProps}className={scrollUpButtonIcon({ className: iconProps?.className })}/></SelectPrimitive.ScrollUpButton>)})SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayNameconst SelectScrollDownButton = forwardRef<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,Merge<React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>,{iconProps?: React.ComponentProps<typeof IconChevronDown>}>>(({ iconProps, ...props }, ref) => {const { scrollDownButton, scrollDownButtonIcon } = select()return (<SelectPrimitive.ScrollDownButton{...props}ref={ref}className={scrollDownButton({ className: props.className })}><IconChevronDown{...iconProps}className={scrollDownButtonIcon({ className: iconProps?.className })}/></SelectPrimitive.ScrollDownButton>)})SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNameconst SelectContent = forwardRef<React.ElementRef<typeof SelectPrimitive.Content>,Merge<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,{portalProps?: React.ComponentProps<typeof SelectPrimitive.Portal>viewportProps?: React.ComponentProps<typeof SelectPrimitive.Viewport>scrollUpButtonProps?: React.ComponentProps<typeof SelectScrollUpButton>scrollDownButtonProps?: React.ComponentProps<typeof SelectScrollDownButton>}>>(({portalProps,viewportProps,scrollUpButtonProps,scrollDownButtonProps,children,position = 'popper',...props},ref,) => {const { content, viewport } = select({ position })return (<SelectPrimitive.Portal {...portalProps}><SelectPrimitive.Content{...props}ref={ref}position={position}className={content({ className: props.className })}><SelectScrollUpButton {...scrollUpButtonProps} /><SelectPrimitive.Viewport{...viewportProps}className={viewport({ className: viewportProps?.className })}>{children}</SelectPrimitive.Viewport><SelectScrollDownButton {...scrollDownButtonProps} /></SelectPrimitive.Content></SelectPrimitive.Portal>)},)SelectContent.displayName = SelectPrimitive.Content.displayNameconst SelectLabel = forwardRef<React.ElementRef<typeof SelectPrimitive.Label>,React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>>((props, ref) => {const { label } = select()return (<SelectPrimitive.Label {...props} ref={ref} className={label({ className: props.className })} />)})SelectLabel.displayName = SelectPrimitive.Label.displayNameconst SelectItem = forwardRef<React.ElementRef<typeof SelectPrimitive.Item>,Merge<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,{indicatorProps?: React.ComponentProps<typeof IconCheck>}>>(({ indicatorProps, children, ...props }, ref) => {const { item, itemIndicator } = select()return (<SelectPrimitive.Item {...props} ref={ref} className={item({ className: props.className })}><SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText><SelectPrimitive.ItemIndicator asChild><IconCheck{...indicatorProps}className={itemIndicator({ className: indicatorProps?.className })}/></SelectPrimitive.ItemIndicator></SelectPrimitive.Item>)})SelectItem.displayName = SelectPrimitive.Item.displayNameconst SelectSeparator = forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>,React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>>((props, ref) => {const { separator } = select()return (<SelectPrimitive.Separator{...props}ref={ref}className={separator({ className: props.className })}/>)})SelectSeparator.displayName = SelectPrimitive.Separator.displayNameconst Select = Object.assign(SelectPrimitive.Root, {Trigger: SelectTrigger,Value: SelectPrimitive.Value,Content: SelectContent,Group: SelectPrimitive.Group,Label: SelectLabel,Item: SelectItem,Separator: SelectSeparator,})export default Selectexport { select, SelectPrimitive } -
Update the import paths to match your project setup
-
All done
You now can start using this component in your project.