RadioGroup

Container for list of Radio options

Radio Group

Yes

Maybe

This is helper text

Size

Required

Disabled

ReadOnly

Error

Overrides helper text

Label

Helper Text

import React from "react"
import { Radio } from "@creation-ui/react"

export const Example = () => (
  <Radio
    size={"md"}
    error={""}
    label={"Radio Group"}
    helperText={"This is helper text"}
  />
)

Code example

Notice that size is passed from wrapper props to Radio component

import { useState } from 'react'
import { Radio, RadioGroup, RadioGroupProps } from '@creation-ui/react'
 
export const RadioGroupExample = (props: RadioGroupProps) => {
  const [selected, setSelected] = useState<string | undefined>()
 
  const options = [
    { label: 'Yes', value: 'yes' },
    { label: 'No', value: 'no' },
    { label: 'Maybe', value: 'maybe' },
  ]
 
  const handleClick = e => setSelected(e.target.value)
 
  return (
    <RadioGroup {...props}>
      {options.map(option => (
        <Radio
          key={option.value}
          label={option.label}
          onClick={handleClick}
          value={option.value}
          checked={selected === option.value}
          size={props.size}
        />
      ))}
    </RadioGroup>
  )
}

Component API

[object Object]

Prop	Default	Description
`size`	`md`	`sm \| md \| lg` Size of the element
`label`	—	`React.ReactNode` Label
`children`	—	`React.ReactNode` Children to be rendered inside the component

Radio Select