Radio

Code

components/Radio/index.tsx

import classnames from 'classnames'

export interface Props<T> {
  options: Array<{
    name: string
    value: T
    disabled?: boolean
  }>
  onChange: (value: T) => void
  value: T
  mode?: 'horizontal' | 'vertical'
}

function Radio<T>({ options, onChange, value, mode = 'horizontal' }: Props<T>) {
  return (
    <div
      className={classnames('flex gap-2 flex-wrap', {
        'flex-col': mode === 'vertical'
      })}
    >
      {options.map((item, index) => (
        <label
          key={index}
          className={classnames(
            'flex items-center',
            item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
          )}
        >
          <input
            type="radio"
            checked={value === item.value}
            onChange={() => onChange(item.value)}
            disabled={item.disabled}
          />
          <span className="text-sm ml-1">{item.name}</span>
        </label>
      ))}
    </div>
  )
}

export default Radio

Props

Name	Type	Default
options*	array
onChange*	function
value*	any
mode	horizontal vertical

Example