OptionGroup

OptionGroup allows the user to select one item from a restrictedcollection (usually 3 to 5 items).

Basic Usage

DailyWeeklyYearly

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  return (
    <OptionGroup
      name="optionGroupField"
      options={[
        { value: "daily", label: "Daily" },
        { value: "weekly", label: "Weekly" },
        { value: "yearly", label: "Yearly" },
      ]}
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event.target.value);
      }}
    />
  );
};

Number as value

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);
  return (
    <OptionGroup
      name="nps"
      options={Array.from({ length: 10 }, (_, i) => {
        return { label: i + 1, value: i + 1 };
      })}
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event.target.value);
      }}
    />
  );
};

Icon as label

The OptionGroup supports Icon as label. Inside each option, use the attribute iconName to provide the name of the icon.

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  return (
    <OptionGroup
      name="transport"
      options={[
        {
          iconName: "plane",
          label: "airplane",
          value: "airplane",
        },
        {
          iconName: "car",
          label: "car",
          value: "car",
        },
        {
          iconName: "bike",
          label: "bike",
          value: "bike",
        },
      ]}
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event.target.value);
      }}
    />
  );
};