Radio

Basic

Loading...

function Demo() {
  const [val, setVal] = useState('')

  return (
    <>
      <div className="c-row c-gutter-x-md">
        <CRadio
          value={val}
          onChange={setVal}
          label="Apple"
          selectedValue="Apple"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="Banana"
          selectedValue="Banana"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="Peach"
          selectedValue="Peach"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="Grape"
          selectedValue="Grape"
        />
      </div>
      <div className="c-mt-md">Current selected: {val}</div>
    </>
  )
}

Fold/Expand Code

Sizes

Loading...

function Demo() {
  const [val, setVal] = useState('md')

  return (
    <>
      <div className="c-row c-items-center c-gutter-x-md">
        <CRadio
          value={val}
          onChange={setVal}
          label="xs"
          selectedValue="xs"
          size="xs"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="sm"
          selectedValue="sm"
          size="sm"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="md (default)"
          selectedValue="md"
          size="md"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="lg"
          selectedValue="lg"
          size="lg"
        />
        <CRadio
          value={val}
          onChange={setVal}
          label="xl"
          selectedValue="xl"
          size="xl"
        />
      </div>
      <div className="c-mt-md">Current selected: {val}</div>
    </>
  )
}

Fold/Expand Code

Disabled

Loading...

function Demo() {
  return (
    <>
      <CRadio
        value={false}
        disabled
        label="Unselect Disabled"
      />
      <div>
        <CRadio
          value={true}
          disabled
          label="Selected Disabled"
        />
      </div>
    </>
  )
}

Fold/Expand Code

RadioGroup

Loading...

function Demo() {
  const [val, setVal] = useState('Apple')

  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Peach', value: 'Peach' },
    { label: 'Grapes', value: 'Grapes' },
  ]

  return (
    <>
      <CRadioGroup
        value={val}
        onChange={setVal}
        options={options}
      />
      <div className="c-mt-md">Current selected: {val}</div>
    </>
  )
}

Fold/Expand Code

CRadio Props

Name (*for required)	Description	Type	Default Value

No Data

CRadioGroup Props

Name (*for required)	Description	Type	Default Value

No Data