Radio

---

Radio

Radio gere separement les variantes semantiques du bouton et de son texte.

Éditeur en direct

function RadioExample() {
  const [value, setValue] = React.useState("email");

  return (
    <div className="grid gap-3">
      <Radio
        name="contact"
        value="email"
        checked={value === "email"}
        onChange={() => setValue("email")}
      >
        Email
      </Radio>

      <Radio
        name="contact"
        value="sms"
        checked={value === "sms"}
        onChange={() => setValue("sms")}
        variant="secondary"
        textVariant="secondary"
      >
        SMS
      </Radio>

      <Radio name="contact" value="disabled" disabled>
        Indisponible option
      </Radio>
    </div>
  );
}

Résultat

Loading...

import { Radio } from "niom-parts";

<Radio
  name="plan"
  value="pro"
  checked={plan === "pro"}
  onChange={() => setPlan("pro")}
>
  Pro
</Radio>;

Cas d'utilisation courants

Les boutons radio conviennent aux groupes d'options lorsqu'une seule valeur peut etre selectionnee. Ils peuvent etre controles par React ou utiliser defaultChecked pour un comportement non controle.

Éditeur en direct

function RadioUseCases() {
  const [plan, setPlan] = React.useState("basic");

  return (
    <div className="grid gap-3">
      <Radio
        name="plan"
        value="basic"
        checked={plan === "basic"}
        onChange={() => setPlan("basic")}
      >
        Basic
      </Radio>

      <Radio
        name="plan"
        value="pro"
        checked={plan === "pro"}
        onChange={() => setPlan("pro")}
        variant="accent"
        textVariant={plan === "pro" ? "accent" : "foreground"}
      >
        Pro
      </Radio>

      <Radio
        name="notification"
        value="daily"
        defaultChecked
        variant="secondary"
      >
        Daily notifications
      </Radio>

      <Radio name="plan" value="enterprise" disabled>
        Enterprise
      </Radio>
    </div>
  );
}

Résultat

Loading...

Proprietes

Propriete	Type	Valeur par defaut
id	string	-
name	string	-
value	string	-
checked	boolean	-
defaultChecked	boolean	-
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	-
variant	"primary" | "secondary" | "tertiary" | "accent"	"primary"
textVariant	"foreground" | "muted" | "primary" | "secondary" | "tertiary" | "accent" | "danger"	"foreground"
disabled	boolean	false
children	ReactNode	-
className	string	-