Radio

Demo

Button type

ApplePearOrange

ApplePearOrange

Radio type

ApplePearOrange

Code

import { RadioChangeEvent } from 'antd'
import Radio from '.'
import { useState } from 'react'

export default function RadioDemo() {
  const [value4, setValue4] = useState('Apple')

  const optionsWithDisabled = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange', disabled: true },
  ]

  const onChange4 = ({ target: { value } }: RadioChangeEvent) => {
    console.log('radio4 checked', value)
    setValue4(value)
  }

  return (
    <div className="demo-container">
      <h3>Button type</h3>
      <div className="demo-row">
        <Radio
          options={optionsWithDisabled}
          onChange={onChange4}
          value={value4}
          optionType="button"
          buttonStyle="outline"
        />

        <Radio
          options={optionsWithDisabled}
          onChange={onChange4}
          value={value4}
          optionType="button"
          buttonStyle="solid"
        />
      </div>

      <h3>Radio type</h3>
      <div className="demo-row">
        <Radio
          options={optionsWithDisabled}
          onChange={onChange4}
          value={value4}
          buttonStyle="solid"
        />
      </div>
    </div>
  )
}