BricksLab Catalog

Thème

@brickslab/ui-web

Bouton radio stylisé avec appearance:none et radial-gradient CSS. Radio est contrôlé (checked + onChange). RadioGroup injecte automatiquement name, checked et onChange dans ses enfants via React.Children.map. Focus visible accessible.

Aperçu

RadioGroup vertical — sélection contrôlée

Gratuit — 5 projets maxPro — projets illimitésÉquipe — collaboration avancée

Sélection : pro

Direction

vertical (défaut) · horizontal

vertical

ClairSombreSystème

horizontal

SmallMediumLargeExtra Large

Tailles

sm 14px · md 16px · lg 20px

smOption SM

mdOption MD

lgOption LG

Option désactivée

disabled — bloque l'interaction sur une option spécifique

FreeProEnterprise (bientôt disponible)

Sélection : free

Radio standalone

sans RadioGroup — contrôlé manuellement

Oui, j'accepte les conditionsNon, je refuse

Props — Radio

Prop	Type	Défaut	Requis	Description
`value`	`string`	—	✓	Valeur de l'option — passée à onChange quand sélectionnée.
`checked`	`boolean`	—	—	État sélectionné — contrôlé par le parent ou RadioGroup.
`onChange`	`(value: string) => void`	—	—	Callback appelé avec la valeur de l'option.
`label`	`React.ReactNode`	—	—	Texte ou JSX affiché à droite du bouton radio.
`name`	`string`	—	—	Attribut name natif — injecté automatiquement par RadioGroup.
`disabled`	`boolean`	`false`	—	Désactive cette option.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille du bouton radio (14 / 16 / 20 px).

Props — RadioGroup

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	✓	Attribut name HTML injecté dans chaque Radio enfant.
`value`	`string`	—	—	Valeur sélectionnée — contrôle quel Radio est coché.
`onChange`	`(value: string) => void`	—	—	Callback appelé avec la valeur de l'option sélectionnée.
`children`	`React.ReactNode`	—	✓	Éléments Radio enfants.
`direction`	`"vertical" \| "horizontal"`	`"vertical"`	—	Disposition des options.
`gap`	`number`	`10`	—	Espacement en pixels entre les options.

Utilisation

tsx

import { Radio, RadioGroup } from "@brickslab/ui-web";
import { useState } from "react";

// RadioGroup contrôlé
const [plan, setPlan] = useState("pro");

<RadioGroup name="plan" value={plan} onChange={setPlan}>
  <Radio value="free" label="Gratuit — 5 projets max" />
  <Radio value="pro" label="Pro — projets illimités" />
  <Radio value="team" label="Équipe — collaboration avancée" />
</RadioGroup>

// Direction horizontale
<RadioGroup name="size" value={size} onChange={setSize} direction="horizontal">
  <Radio value="sm" label="S" />
  <Radio value="md" label="M" />
  <Radio value="lg" label="L" />
</RadioGroup>

// Option désactivée
<RadioGroup name="tier" value={tier} onChange={setTier}>
  <Radio value="free" label="Free" />
  <Radio value="pro" label="Pro" />
  <Radio value="enterprise" label="Enterprise" disabled />
</RadioGroup>

// Radio standalone (sans groupe)
<Radio
  name="accept"
  value="yes"
  checked={accepted}
  onChange={() => setAccepted(true)}
  label="Oui, j'accepte"
/>

Radio / RadioGroup