Skip to main content

onChange

Description​

Fires when the state of a radio button is checked

Usage​

onChange?: (ev: { value: boolean; inputValue: string | number }) => void;

Parameters​

  • value - (required) the state of the radio button:
    • true - checked
    • false - not checked
  • inputValue - (required) input value associated with the radio button

Example​

// Handler receives an object: { value: boolean; inputValue: string | number }
function handleChange(ev: { value: boolean; inputValue: string | number }) {
  const newState = ev;
  console.log(newState);
  // => {value: true, inputValue: 'Option 1'}
}

// Usage in JSX: React event prop is camelCase: onChange
<Radio label="Checkbox" inputValue="Option 1" onChange={handleChange} />

Details​

The handler function receives an object with the state of a radio and its value.

Related article: Catching the change of a checkbox state