Select

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

Preview

Select a fruit

Code

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

Preview

Select a timezone

Code

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

Preview

EmailSelect a verified email to display

You can manage email addresses in your email settings.

Submit

Code

'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

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add select

   yarn

   yarn dlx @dinui/cli@latest add select

   pnpm

   pnpm dlx @dinui/cli@latest add select

   bun

   bunx @dinui/cli@latest add select

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-select @tabler/icons-react tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-select @tabler/icons-react tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-select @tabler/icons-react tailwind-variants type-fest

   bun

   bun add @radix-ui/react-select @tabler/icons-react tailwind-variants type-fest

3. 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.displayName
   
   const 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.displayName
   
   const 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.displayName
   
   const 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.displayName
   
   const 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.displayName
   
   const 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.displayName
   
   const 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.displayName
   
   const Select = Object.assign(SelectPrimitive.Root, {
     Trigger: SelectTrigger,
     Value: SelectPrimitive.Value,
     Content: SelectContent,
     Group: SelectPrimitive.Group,
     Label: SelectLabel,
     Item: SelectItem,
     Separator: SelectSeparator,
   })
   
   export default Select
   export { select, SelectPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.