Skip to main content

SingleSelectField

Storybook

To implement SingleSelectField component into your project you'll need to add the import:

import { SingleSelectField } from "@shoptet/ui";

After adding import into your project you can use it simply like:

<SingleSelectField
  label="Label"
  options={[
    {
      id: "1",
      name: "Apple",
    },
    {
      id: "2",
      name: "Banana",
    },
    {
      id: "3",
      name: "Cherry",
    },
    {
      id: "4",
      name: "Date",
    },
    {
      id: "5",
      name: "Elderberry",
    },
    {
      id: "6",
      name: "Fig",
    },
    {
      id: "7",
      name: "Grape",
    },
    {
      id: "8",
      name: "Honeydew",
    },
  ]}
  getOptionValue={(item: Item) => item.id}
  getOptionLabel={(item: Item) => item.name}
  renderOption={
    <SingleSelectField.Option>
      <SingleSelectField.Option.Cell key="name">
        <Strong>{item.name}</Strong>
      </SingleSelectField.Option.Cell>
      <SingleSelectField.Option.Cell key="country">
        {item.country}
      </SingleSelectField.Option.Cell>
    </SingleSelectField.Option>
  }
  value={"8"}
  onChange={() => {}}
/>