Develop ultra fast with Prismane 🎉
Logo
Quick Search...

NativeSelectField

NativeSelectField displays a native select field.
Category: Inputs Source

Import

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

Usage

 
<NativeSelectField
  name="select"
  options={[
    { value: "demon-slayer", label: "The Demon Slayer" },
    { value: "doomsday", label: "Doomsday Incoming" },
    { value: "titanic", label: "The Titanic" },
  ]}
/>

Controlled

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

  return (
    <NativeSelectField
      name="select"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      options={[
        { value: "demon-slayer", label: "The Demon Slayer" },
        { value: "doomsday", label: "Doomsday Incoming" },
        { value: "titanic", label: "The Titanic" },
      ]}
    />
  );
}

With Icon

 
<NativeSelectField
  name="select"
  icon={<GearSix />}
  options={[
    { value: "demon-slayer", label: "The Demon Slayer" },
    { value: "doomsday", label: "Doomsday Incoming" },
    { value: "titanic", label: "The Titanic" },
  ]}
/>

With Addon

 
<NativeSelectField
  name="select"
  addons={<Field.Addon position="left">Name</Field.Addon>}
  options={[
    { value: "demon-slayer", label: "The Demon Slayer" },
    { value: "doomsday", label: "Doomsday Incoming" },
    { value: "titanic", label: "The Titanic" },
  ]}
/>

NativeSelectField Variants

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

  return (
    <>
      <NativeSelectField
        variant="outlined"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        variant="filled"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        variant="underlined"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        variant="unstyled"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
    </>
  );
}

NativeSelectField Sizes

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

  return (
    <Flex direction="column" gap={fr(2)}>
      <NativeSelectField
        size="xs"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        size="sm"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        size="base"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        size="md"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
      <NativeSelectField
        size="lg"
        placeholder="Default Field"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "demon-slayer", label: "The Demon Slayer" },
          { value: "doomsday", label: "Doomsday Incoming" },
          { value: "titanic", label: "The Titanic" },
        ]}
      />
    </Flex>
  );
}

API

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

Go BackNativeDateField
Up NextNumberField