Radio Group | Park UI

ReactSolidVue

Installation

npx @park-ui/cli add radio-group

Add Component

Copy the code snippet below into you components folder.

'use client'
import { RadioGroup } from '@ark-ui/react/radio-group'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { radioGroup } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(radioGroup)

export type RootProps = ComponentProps<typeof Root>
export type ItemProps = ComponentProps<typeof Item>

export const Root = withProvider(RadioGroup.Root, 'root')
export const RootProvider = withProvider(RadioGroup.RootProvider, 'root')
export const Indicator = withContext(RadioGroup.Indicator, 'indicator')
export const Item = withContext(RadioGroup.Item, 'item')
export const ItemControl = withContext(RadioGroup.ItemControl, 'itemControl')
export const ItemText = withContext(RadioGroup.ItemText, 'itemText')
export const Label = withContext(RadioGroup.Label, 'label')
export const ItemHiddenInput = RadioGroup.ItemHiddenInput

export { RadioGroupContext as Context } from '@ark-ui/react/radio-group'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { radioGroupAnatomy } from '@ark-ui/react/radio-group'
import { defineSlotRecipe } from '@pandacss/dev'

export const radioGroup = defineSlotRecipe({
  className: 'radio-group',
  slots: radioGroupAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '3',
    },
    itemControl: {
      alignItems: 'center',
      borderRadius: 'full',
      display: 'inline-flex',
      flexShrink: 0,
      justifyContent: 'center',
      verticalAlign: 'top',
      _after: {
        content: '""',
        display: 'block',
        borderRadius: 'full',
        boxSize: '40%',
      },
      _focusVisible: {
        focusVisibleRing: 'outside',
      },
    },
    item: {
      alignItems: 'center',
      cursor: 'pointer',
      display: 'flex',
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    itemText: {
      fontWeight: 'medium',
      userSelect: 'none',
    },
  },
  defaultVariants: {
    variant: 'solid',
    size: 'md',
  },
  variants: {
    variant: {
      solid: {
        itemControl: {
          boxShadow: 'inset 0 0 0 1px var(--shadow-color)',
          boxShadowColor: 'gray.surface.border',
          _checked: {
            bg: 'colorPalette.solid.bg',
            color: 'colorPalette.solid.fg',
            boxShadowColor: 'colorPalette.solid.bg',
            _after: {
              background: 'colorPalette.solid.fg',
            },
          },
        },
      },
    },
    size: {
      sm: {
        item: { gap: '2' },
        itemControl: { boxSize: '4.5' },
        itemText: { textStyle: 'sm' },
      },
      md: {
        item: { gap: '3' },
        itemControl: { boxSize: '5' },
        itemText: { textStyle: 'md' },
      },
      lg: {
        item: { gap: '3' },
        itemControl: { boxSize: '5.5' },
        itemText: { textStyle: 'lg' },
      },
    },
  },
})

Usage

import { RadioGroup } from '@/components/ui'

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemControl />
    <RadioGroup.ItemText />
  </RadioGroup.Item>
</RadioGroup.Root>

Info

If you prefer a closed component composition, check out the snippet below.

Examples

Controlled

Pass the value and onValueChange props to the RadioGroup.Root component to control the selected radio button.

ReactSolidVue

Colors

Pass the colorPalette prop to the RadioGroup.Root component to change the color scheme of the component.

Sizes

Pass the size prop to the RadioGroup.Root component to change the size of the radio component.

Radio (sm)

Radio (md)

Radio (lg)

Disabled

Pass the disabled prop to the RadioGroup.Item component to make the radio disabled.

ReactSolidVueSvelte

Closed Component

Here's how to setup the Radio for a closed component composition.

import { forwardRef, type InputHTMLAttributes } from 'react'
import * as StyledRadioGroup from '@/components/ui/radio-group'

export interface RadioProps extends StyledRadioGroup.ItemProps {
  inputProps?: InputHTMLAttributes<HTMLInputElement>
}

export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {
  const { children, inputProps, ...rest } = props
  return (
    <StyledRadioGroup.Item {...rest}>
      <StyledRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
      <StyledRadioGroup.ItemControl />
      {children && <StyledRadioGroup.ItemText>{children}</StyledRadioGroup.ItemText>}
    </StyledRadioGroup.Item>
  )
})

export const RadioGroup = StyledRadioGroup.Root

Here's how to use it:

<RadioGroup>
  <Radio />
</RadioGroup>

Props

Root

Prop	Default	Type
`variant`	`'solid'`	`'solid'`
`size`	`'md'`	`'sm' \| 'md' \| 'lg'`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`string` The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
`disabled`		`boolean` If `true`, the radio group will be disabled
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string label: string indicator: string item: (value: string) => string itemLabel: (value: string) => string itemControl: (value: string) => string itemHiddenInput: (value: string) => string }>` The ids of the elements in the radio. Useful for composition.
`name`		`string` The name of the input fields in the radio (Useful for form submission).
`onValueChange`		`(details: ValueChangeDetails) => void` Function called once a radio is checked
`orientation`		`'horizontal' \| 'vertical'` Orientation of the radio group
`readOnly`		`boolean` Whether the checkbox is read-only
`value`		`string` The controlled value of the radio group

Item

Prop	Default	Type
`value`*		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean`
`invalid`		`boolean`