Radio

https://semantic-ui.com/modules/checkbox.html#radio

label

string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) | (string & SemanticShorthandItemFunc<...>) | (string & ... 1 more ... & { ...; }) | undefined

className

string | undefined

disabled

boolean | undefined

checked

boolean | undefined

name

string

value

ReactText

slider

boolean | undefined

toggle

boolean | undefined

type

"radio" | "checkbox" | undefined

any

defaultChecked

boolean | undefined

defaultIndeterminate

boolean | undefined

fitted

boolean | undefined

string | number | undefined

indeterminate

boolean | undefined

onChange

((event: FormEvent<HTMLInputElement>, data: CheckboxProps) => void) | undefined

onClick

((event: MouseEvent<HTMLInputElement, MouseEvent>, data: CheckboxProps) => void) | undefined

onMouseDown

((event: MouseEvent<HTMLInputElement, MouseEvent>, data: CheckboxProps) => void) | undefined

onMouseUp

((event: MouseEvent<HTMLInputElement, MouseEvent>, data: CheckboxProps) => void) | undefined

radio

boolean | undefined

readOnly

boolean | undefined

tabIndex

string | number | undefined

Unselected radio

<Radio label="Radio choise" checked={false} />

<Radio label="Radio choise" checked={false} />

Disable unselected radio

<Radio label="Radio choise" disabled checked={false} />

<Radio label="Radio choise" disabled checked={false} />

Selected radio

<Radio label="Radio choise" checked />

<Radio label="Radio choise" checked />

Disable selected radio

<Radio label="Radio choise" checked disabled />

<Radio label="Radio choise" checked disabled />

Radio Group

() => {
  const [selected, setSelected] = React.useState('this')
  return (
    <Form>
      <Form.Field style={{ marginBottom: '8px' }}>
        <Radio
          label="Choose this"
          name="radioGroup"
          value="this"
          checked={selected === 'this'}
          onChange={() => setSelected('this')}
        />
      </Form.Field>
      <Form.Field>
        <Radio
          label="Or that"
          name="radioGroup"
          value="that"
          checked={selected === 'that'}
          onChange={() => setSelected('that')}
        />
      </Form.Field>
    </Form>
  )
}

() => {
  const [selected, setSelected] = React.useState('this')
  return (
    <Form>
      <Form.Field style={{ marginBottom: '8px' }}>
        <Radio
          label="Choose this"
          name="radioGroup"
          value="this"
          checked={selected === 'this'}
          onChange={() => setSelected('this')}
        />
      </Form.Field>
      <Form.Field>
        <Radio
          label="Or that"
          name="radioGroup"
          value="that"
          checked={selected === 'that'}
          onChange={() => setSelected('that')}
        />
      </Form.Field>
    </Form>
  )
}

Radio

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Unselected radio

Disable unselected radio

Selected radio

Disable selected radio

Radio Group

Unselected radio