Radio

1import { Radio } from "@supabase/ui";
2
3const myComponentType = (<Radio />).type;
4
5export default function RadioBasic() {
6  console.log(myComponentType);
7
8  function handleOnChange(e) {
9    // console.log(e.target.value)
10  }
11
12  return (
13    <>
14      <Radio
15        name="basic-radios"
16        label="Radio 1"
17        value="Novice"
18        onChange={handleOnChange}
19      />
20      <Radio
21        name="basic-radios"
22        label="Radio 2"
23        value="Expert"
24        onChange={handleOnChange}
25      />
26    </>
27  );
28}
29

1import { Radio } from "@supabase/ui";
2
3export default function RadioGrouped() {
4  function handleOnChange(e) {
5    console.log(e.target.value);
6  }
7
8  return (
9    <Radio.Group
10      name="grouped-radios"
11      label="Group of radios"
12      onChange={handleOnChange}
13    >
14      <Radio
15        label="Frist Radio"
16        description="The value of this Radio is controlled by a react state"
17      />
18      <Radio
19        label="Second Radio"
20        description="The value of this Radio is controlled by a react state"
21      />
22    </Radio.Group>
23  );
24}
25

1import { Radio } from "@supabase/ui";
2import { useState } from "react";
3
4export default function RadioControlled() {
5  const [value, setValue] = useState("Novice");
6
7  function handleOnChange(e) {
8    setValue(e.target.value);
9  }
10
11  return (
12    <Radio.Group value={value} onChange={handleOnChange} name="radio-basic">
13      <Radio label="Basic Radio 1" value="Novice" />
14      <Radio label="Basic Radio 2" value="Expert" />
15    </Radio.Group>
16  );
17}
18

1import { Radio } from "@supabase/ui";
2
3export default function RadioGrouped() {
4  return (
5    <Radio.Group
6      type="cards"
7      label="Group of radios"
8      labelOptional="Optional label"
9      descriptionText="You can also show label hint text here"
10    >
11      <Radio
12        label="Frist Radio"
13        description="The value of this Radio is controlled by a react state"
14      />
15      <Radio
16        label="Second Radio"
17        description="The value of this Radio is controlled by a react state"
18      />
19    </Radio.Group>
20  );
21}
22