SwashDocs

Radio

Radio button control.

Props:

  • checked: boolean
  • onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  • disabled: boolean
  • aria-invalid: boolean
import { useState } from "react";
import { Radio } from "swash/controls/Radio";

() => (
  const [checked, setChecked] = useState(true);
  return (
    <div className="flex gap-2">
      <Radio
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        checked={checked}
      />
      <Radio
        aria-invalid="true"
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        checked={checked}
      />
      <Radio
        disabled
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        checked={checked}
      />
    </div>
  );
);

Radio button with a label

You can personalize scale with the data-scale props. data-scale: "sm" | "md" | "lg" (default is md)

import { useState } from "react";
import { Radio, RadioLabel } from "swash/controls/Radio";

() => (
  const [checked, setChecked] = useState(true);
  return (
    <RadioLabel>
      <Radio
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        checked={checked}
      />
      Radio
    </RadioLabel>
  );
);

Radio Group

If one of the radio is disabled all your group will be disabled.

import { useState } from "react";
import { Radio, RadioGroup, RadioLabel } from "swash/controls/Radio";

() => (
    const [values, setValues] = useState({
        radio1: false,
        radio2: false,
        radio3: false,
      });
    
      return (
        <RadioGroup>
          <RadioLabel data-scale="sm">
            <Radio
              onChange={(event) =>
                setValues({ ...values, radio1: event.target.checked })
              }
              checked={values.radio1}
            />
            Smaller
          </RadioLabel>
          <RadioLabel>
            <Radio
              onChange={(event) =>
                setValues({ ...values, radio2: event.target.checked })
              }
              checked={values.radio2}
            />
            Default
          </RadioLabel>
          <RadioLabel data-scale="lg">
            <Radio
              onChange={(event) =>
                setValues({ ...values, radio3: event.target.checked })
              }
              checked={values.radio3}
            />
            Bigger
          </RadioLabel>
        </RadioGroup>
      );
);