Radio group

A group of radio inputs for single selection

registry/ui/radio-group.tsx

import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'

type RadioGroupProps = JSX.IntrinsicElements['div']

export const RadioGroup: FC<RadioGroupProps> = ({
  class: className,
  children,
  ...props
}) => (
  <div
    data-slot="radio-group"
    role="radiogroup"
    class={cn('grid gap-3', className)}
    {...props}
  >
    {children}
  </div>
)

type RadioGroupItemProps = Omit<JSX.IntrinsicElements['input'], 'type'>

export const RadioGroupItem: FC<RadioGroupItemProps> = ({
  class: className,
  ...props
}) => (
  <input
    type="radio"
    data-slot="radio-group-item"
    class={cn(
      'size-4 shrink-0 appearance-none rounded-full border border-input bg-background cursor-pointer',
      'checked:border-primary checked:border-[5px]',
      'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 outline-none',
      'disabled:cursor-not-allowed disabled:opacity-50',
      'transition-colors',
      className
    )}
    {...props}
  />
)

Installation

Initialize your project

First time only. Sets up config and installs base dependencies.

npx @kiwa-ui/cli init

Add the component

This will install the component and any dependencies it needs.

npx @kiwa-ui/cli add radio-group

Add the source file

Add this file to your project.

registry/ui/radio-group.tsx

import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'

type RadioGroupProps = JSX.IntrinsicElements['div']

export const RadioGroup: FC<RadioGroupProps> = ({
  class: className,
  children,
  ...props
}) => (
  <div
    data-slot="radio-group"
    role="radiogroup"
    class={cn('grid gap-3', className)}
    {...props}
  >
    {children}
  </div>
)

type RadioGroupItemProps = Omit<JSX.IntrinsicElements['input'], 'type'>

export const RadioGroupItem: FC<RadioGroupItemProps> = ({
  class: className,
  ...props
}) => (
  <input
    type="radio"
    data-slot="radio-group-item"
    class={cn(
      'size-4 shrink-0 appearance-none rounded-full border border-input bg-background cursor-pointer',
      'checked:border-primary checked:border-[5px]',
      'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 outline-none',
      'disabled:cursor-not-allowed disabled:opacity-50',
      'transition-colors',
      className
    )}
    {...props}
  />
)

Usage

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'

<RadioGroup name='plan'>
  <div class='flex items-center gap-2'>
    <RadioGroupItem id='starter' value='starter' />
    <Label for='starter'>Starter</Label>
  </div>
  <div class='flex items-center gap-2'>
    <RadioGroupItem id='pro' value='pro' />
    <Label for='pro'>Pro</Label>
  </div>
</RadioGroup>