Radio Group | Zalify UI

ReactSolidVue

React

Usage

import { RadioGroup } from '@zalify-ui/react'

<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

React

Colors

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

React

Sizes

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

Radio (sm)

Radio (md)

Radio (lg)

React

Disabled

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

ReactSolidVueSvelte

React

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`