SelectField

SelectField displays a field that handles choosing a value from a set values.

Import

import { SelectField } from "@prismane/core";

Usage

function Demo() {
  const [value, setValue] = useState("");

  const handleChange = (e) => setValue(e.target.value);

  return (
    <SelectField
      value={value}
      onChange={handleChange}
      placeholder="Choose A Shape"
      options={[
        { element: "Star", value: "star" },
        { element: "Circle", value: "circle" },
        { element: "Square", value: "square" },
      ]}
    />
  );
}

With Icon

function Demo() {
  const [value, setValue] = useState("");

  const handleChange = (e) => setValue(e.target.value);

  return (
    <SelectField
      value={value}
      onChange={handleChange}
      placeholder="Choose A Shape"
      icon={<GearSix />}
      options={[
        { element: "Star", value: "star" },
        { element: "Circle", value: "circle" },
        { element: "Square", value: "square" },
      ]}
    />
  );
}

SelectField Variants

function Demo() {
  const [value, setValue] = useState("");

  return (
    <>
      <SelectField
        variant="outlined"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        variant="filled"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        variant="underlined"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        variant="unstyled"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
    </>
  );
}

SelectField Sizes

function Demo() {
  const [value, setValue] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <SelectField
        size="xs"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        size="sm"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        size="base"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        size="md"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
      <SelectField
        size="lg"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { element: "Star", value: "star" },
          { element: "Circle", value: "circle" },
          { element: "Square", value: "square" },
        ]}
      />
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- SelectField

Go BackSegmentedField

Up NextShow