Select

1import { Select } from "@supabase/ui";
2
3export default function SelectBasic() {
4  function handleChange(e) {
5    // console.log(e.target.value)
6  }
7  return (
8    <Select label="Select label" onChange={handleChange}>
9      <Select.Option>Option one</Select.Option>
10      <Select.Option>Option two</Select.Option>
11      <Select.Option>Option three</Select.Option>
12    </Select>
13  );
14}
15

1import { Select } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SelectControlled() {
5  const [value, setValue] = useState("two");
6  function handleChange(e) {
7    // console.log(e.target.value)
8    setValue(e.target.value);
9  }
10
11  return (
12    <Select label="Select label" onChange={handleChange}>
13      <Select.Option value="one">Option one</Select.Option>
14      <Select.Option value="two">Option two</Select.Option>
15      <Select.Option value="three">Option three</Select.Option>
16    </Select>
17  );
18}
19

1import { Select } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SelectControlled() {
5  const [value, setValue] = useState("two");
6  function handleChange(e) {
7    // console.log(e.target.value)
8    setValue(e.target.value);
9  }
10
11  return (
12    <Select
13      label="Select label"
14      onChange={handleChange}
15      error="This is an error message"
16    >
17      <Select.Option value="one">Option one</Select.Option>
18      <Select.Option value="two">Option two</Select.Option>
19      <Select.Option value="three">Option three</Select.Option>
20    </Select>
21  );
22}
23

1import { IconActivity, Select } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SelectControlled() {
5  const [value, setValue] = useState("two");
6  function handleChange(e) {
7    // console.log(e.target.value)
8    setValue(e.target.value);
9  }
10
11  return (
12    <Select
13      label="Select label"
14      onChange={handleChange}
15      icon={<IconActivity />}
16    >
17      <Select.Option value="one">Option one</Select.Option>
18      <Select.Option value="two">Option two</Select.Option>
19      <Select.Option value="three">Option three</Select.Option>
20    </Select>
21  );
22}
23

1import { Select } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SelectControlled() {
5  const [value, setValue] = useState("two");
6  function handleChange(e) {
7    // console.log(e.target.value)
8    setValue(e.target.value);
9  }
10
11  return (
12    <Select label="Select label" onChange={handleChange}>
13      <Select.OptGroup label="Group name one" />
14      <Select.Option value="one">Option one</Select.Option>
15      <Select.Option value="two">Option two</Select.Option>
16      <Select.OptGroup label="Group name two" />
17      <Select.Option value="three">Option three</Select.Option>
18    </Select>
19  );
20}
21