> RadioGroup

RadioGroup

Groupe de boutons radio avec variantes liste et card.

TagsuiExemples4StylesDisponibles

Default

Choix

Option A

Option B

Option C

export const Default = () => {
  const [value, setValue] = useState('a');
  return (
    <RadioGroup value={value} onChange={setValue} label="Choix">
      <RadioGroup.Item value="a">Option A</RadioGroup.Item>
      <RadioGroup.Item value="b">Option B</RadioGroup.Item>
      <RadioGroup.Item value="c">Option C</RadioGroup.Item>
    </RadioGroup>
  );
};

Cards

Confirmez-vous ?

Oui

Non

export const Cards = () => {
  const [value, setValue] = useState('oui');
  return (
    <RadioGroup value={value} onChange={setValue} label="Confirmez-vous ?">
      <RadioGroup.Card value="oui" label="Oui" icon="Check" />
      <RadioGroup.Card value="non" label="Non" icon="X" />
    </RadioGroup>
  );
};

WithError

Avec erreur

Option A

Option B

Veuillez faire un choix

export const WithError = () => (
  <Box display="flex" flexDirection="column" gap={24}>
    <RadioGroup value="a" label="Avec erreur" error="Veuillez faire un choix">
      <RadioGroup.Item value="a">Option A</RadioGroup.Item>
      <RadioGroup.Item value="b">Option B</RadioGroup.Item>
    </RadioGroup>
  </Box>
);

RadioInput

export const RadioInput = () => {
  const [value, setValue] = useState('tutu');
  return (
    <Box display="flex" flexDirection="column" gap={24}>
      <RadioGroup.Input id="exemple-input" size="sm" value="tutu" checked={value === 'tutu'} onChange={setValue} />
      <RadioGroup.Input id="exemple-input-md" size="md" value="toto" checked={value === 'toto'} onChange={setValue} />
    </Box>
  );
};

Alveole UI Kit — v1.8.4