Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Preview

Default

Comfortable

Compact

Code

import Label from '@dinui/react/label'
import RadioGroup from '@dinui/react/radio-group'

export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Form

Preview

Notify me about...

All new messages

Direct messages and mentions

Nothing

Submit

Code

'use client'

import Button from '@dinui/react/button'
import Form, { useForm } from '@dinui/react/form'
import RadioGroup from '@dinui/react/radio-group'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const FormSchema = z.object({
  type: z.enum(['all', 'mentions', 'none'], {
    required_error: 'You need to select a notification type.',
  }),
})

export default function RadioGroupForm() {
  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="type"
        render={({ field }) => (
          <Form.Item className="gap-3">
            <Form.Label>Notify me about...</Form.Label>
            <Form.Control>
              <RadioGroup onValueChange={field.onChange} defaultValue={field.value}>
                <Form.Item className="flex-row gap-3">
                  <Form.Control>
                    <RadioGroup.Item value="all" />
                  </Form.Control>
                  <Form.Label className="font-normal">All new messages</Form.Label>
                </Form.Item>
                <Form.Item className="flex-row gap-3">
                  <Form.Control>
                    <RadioGroup.Item value="mentions" />
                  </Form.Control>
                  <Form.Label className="font-normal">Direct messages and mentions</Form.Label>
                </Form.Item>
                <Form.Item className="flex-row gap-3">
                  <Form.Control>
                    <RadioGroup.Item value="none" />
                  </Form.Control>
                  <Form.Label className="font-normal">Nothing</Form.Label>
                </Form.Item>
              </RadioGroup>
            </Form.Control>
            <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 radio-group

   yarn

   yarn dlx @dinui/cli@latest add radio-group

   pnpm

   pnpm dlx @dinui/cli@latest add radio-group

   bun

   bunx @dinui/cli@latest add radio-group

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-radio-group @tabler/icons-react tailwind-variants type-fest

   yarn

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

   pnpm

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

   bun

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

3. Copy and paste the following code into your project

   'use client'
   
   import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
   import { IconCircle } from '@tabler/icons-react'
   import * as React from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const radioGroup = tv({
     slots: {
       root: 'grid gap-2',
       item: [
         'aspect-square size-4 rounded-full border border-fg',
         'disabled:cursor-not-allowed disabled:opacity-50',
       ],
       indicatorIcon: 'size-3 fill-current m-auto',
     },
   })
   
   const RadioGroupRoot = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
   >((props, ref) => {
     const { root } = radioGroup()
   
     return (
       <RadioGroupPrimitive.Root
         {...props}
         ref={ref}
         className={root({ className: props.className })}
       />
     )
   })
   RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName
   
   const RadioGroupItem = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Item>,
     Merge<
       React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
       {
         indicatorIconProps?: React.ComponentProps<typeof IconCircle>
       }
     >
   >(({ indicatorIconProps, ...props }, ref) => {
     const { item, indicatorIcon } = radioGroup()
   
     return (
       <RadioGroupPrimitive.Item {...props} ref={ref} className={item({ className: props.className })}>
         <RadioGroupPrimitive.Indicator asChild>
           <IconCircle
             {...indicatorIconProps}
             className={indicatorIcon({ className: indicatorIconProps?.className })}
           />
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
     )
   })
   RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
   
   const RadioGroup = Object.assign(RadioGroupRoot, {
     Item: RadioGroupItem,
   })
   
   export default RadioGroup
   export { radioGroup, RadioGroupPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.