Fieldset (design)

() => {
  const values = ['Antwerp', 'Brussels', 'Hasselt', 'Mechelen'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="The capital of Belgium">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="buggles"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};