Radio Group | Qasa Design System

How do you want to live?

HouseApartmentTerrace House

Examples

Button Variant

How do you want to live?

HouseApartmentTerrace House

Card Variant

How do you want to live?

With helper text

The helperText prop can be used to provide additional context for the radio option of the Card-variant.

How do you want to live?

Custom label

You can use a custom component as a label instead of the default RadioGroup.Label. In this case, make sure to use the aria-labelledby prop to reference the id of your label element.

How do you want to live?

Invalid state

The isInvalid prop and the errorMessage can be used to indicate an error in the radio group, such as when a required selection is missing.

How do you want to live?

HouseApartmentTerrace House

Please select your home type

Disabled state

To disable the entire RadioGroup, use the isDisabled prop. To disable individual options, apply the isDisabled prop to each item individually.

How do you want to live?

HouseApartmentTerrace House

Controlled state

Optionally use the value prop to control the selected option and onValueChange to update it.

How do you want to live?

HouseApartmentTerrace House

Usage with React Hook Form

The RadioGroup component integrates with react-hook-form using the Controller component, or alternatively using the useController hook.

export function MyFormComponent() {
  const { control, handleSubmit } = useForm({
    defaultValues: { homeType: undefined },
  })
 
  const onSubmit = (formData) => {
    // Handle formData
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex flex-col gap-2">
        <Controller
          control={control}
          name="home_type"
          rules={{ required: 'Please select a home type' }}
          render={({ field, fieldState }) => {
            const { onChange, ...fieldProps } = field
            return (
              <RadioGroup
                onValueChange={onChange}
                isInvalid={fieldState.invalid}
                errorMessage={fieldState.error?.message}
                {...fieldProps}
              >
                <RadioGroup.Label>How do you want to live?</RadioGroup.Label>
                <div className="flex flex-col gap-2">
                  <RadioGroup.Button label="House" value="house" />
                  <RadioGroup.Button label="Apartment" value="apartment" />
                  <RadioGroup.Button label="Terrace House" value="terrace_house" />
                </div>
              </RadioGroup>
            )
          }}
        />
        <Button type="submit">Submit</Button>
      </div>
    </form>
  )
}

Accessibility

The radio group should always have a label to provide context for the user. Use the included RadioGroup.Label component, or provide a custom label using the aria-labelledby prop.

API Reference

RadioGroup

The main radio group component.

Prop	Default	Description
`name?`	-	`string` The name of the group. Submitted with its owning form as part of a name/value pair.
`value?`	-	`string` The controlled value of the radio item to check. Should be used in conjunction with `onValueChange`.
`defaultValue?`	-	`string` The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
`onValueChange?`	-	`((value: string) => void)` Event handler called when the value changes.
`isRequired?`	`false`	`boolean` If `true` the user must check a radio item before the owning form can be submitted.
`isDisabled?`	`false`	`boolean` If `true` all child radio items will be disabled.
`isInvalid?`	`false`	`boolean` If `true` the radio group will be invalid.
`errorMessage?`	-	`string` The error message to display if `isInvalid` is `true`

RadioGroup.Button

A selectable option to be listed within the <RadioGroup />, appearing as a standard radio button.

Prop	Default	Description
`value`	-	`string`
`label`	-	`string` The label for the radio button
`isDisabled?`	`false`	`boolean` If `true` it prevents the user from interacting with the radio item.

RadioGroup.Card

A selectable option to be listed within the <RadioGroup />, appearing as a card.

Prop	Default	Description
`value`	-	`string`
`label`	-	`string` The label for the radio card
`isDisabled?`	`false`	`boolean` If `true` it prevents the user from interacting with the radio item.
`helperText?`	-	`string` Text that provides additional guidance to the user

RadioGroup.Label

The label for the radio group.

The RadioGroup.Label inherits all props from the <span> HTML element.