Radio Button Group

Allows single selection from multiple options.

Docs

API Reference

Usage

SMLXL

size: md

variant

import { RadioButtonGroup } from '~/components/ui'

export const Demo = (props: RadioButtonGroup.RootProps) => {
  const options = [{ value: 'S' }, { value: 'M' }, { value: 'L' }, { value: 'XL' }]

  return (
    <RadioButtonGroup.Root defaultValue="M" {...props}>
      {options.map((option, id) => (
        <RadioButtonGroup.Item key={id} value={option.value} disabled={option.value === 'L'} px="0">
          <RadioButtonGroup.ItemControl />
          <RadioButtonGroup.ItemText>{option.value}</RadioButtonGroup.ItemText>
          <RadioButtonGroup.ItemHiddenInput />
        </RadioButtonGroup.Item>
      ))}
    </RadioButtonGroup.Root>
  )
}

Installation

npx @park-ui/cli components add radio-button-group

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/radio-button-group.tsx

'use client'
import type { Assign } from '@ark-ui/react'
import { RadioGroup } from '@ark-ui/react/radio-group'
import { type RadioButtonGroupVariantProps, radioButtonGroup } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(radioButtonGroup)

export interface RootProps
  extends Assign<HTMLStyledProps<'div'>, RadioGroup.RootProps>,
    RadioButtonGroupVariantProps {}
export const Root = withProvider<HTMLDivElement, RootProps>(RadioGroup.Root, 'root')

export const Indicator = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorProps>
>(RadioGroup.Indicator, 'indicator')

export const ItemControl = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlProps>
>(RadioGroup.ItemControl, 'itemControl')

export const Item = withContext<
  HTMLLabelElement,
  Assign<HTMLStyledProps<'label'>, RadioGroup.ItemProps>
>(RadioGroup.Item, 'item')

export const ItemText = withContext<
  HTMLSpanElement,
  Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextProps>
>(RadioGroup.ItemText, 'itemText')

export const Label = withContext<
  HTMLLabelElement,
  Assign<HTMLStyledProps<'label'>, RadioGroup.LabelProps>
>(RadioGroup.Label, 'label')

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

import { type Assign, RadioGroup } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type RadioGroupVariantProps, radioButtonGroup } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(radioButtonGroup)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootProps>, RadioGroupVariantProps>
>(RadioGroup.Root, 'root')

export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorProps>>(
  RadioGroup.Indicator,
  'indicator',
)

export const ItemControl = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlProps>>(
  RadioGroup.ItemControl,
  'itemControl',
)

export const Item = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.ItemProps>>(
  RadioGroup.Item,
  'item',
)

export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextProps>>(
  RadioGroup.ItemText,
  'itemText',
)

export const Label = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.LabelProps>>(
  RadioGroup.Label,
  'label',
)

export {
  RadioGroupContext as Context,
  RadioGroupItemHiddenInput as ItemHiddenInput,
} from '@ark-ui/solid'

No snippet found

Extend ~/components/ui/primitives/index.ts with the following line:

export * as RadioButtonGroup from './radio-button-group'

2

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts: