PlayfulSelect

Renders a custom select component with multiple states. The component uses downshift because it is well tested and includes good accessiblity practices.

<PlayfulSelect
  id="DynamicPlayfulSelect"
  name="DynamicPlayfulSelect"
  initialSelectedItem={{
    label: "Dropdown",
    value: "",
  }}
  items={[
    {
      label: "Label1",
      value: "Item1",
    },
    {
      label: "Label2",
      value: "Item2",
    },
    {
      label: "Label3",
      value: "Item3",
    },
    {
      label: "Label4",
      value: "Item4",
    },
  ]}
  onChange={(event: Event) => event}
/>

With medium scale

<PlayfulSelect
  id="DynamicPlayfulSelectMedium"
  name="DynamicPlayfulSelectMedium"
  initialSelectedItem={{
    label: "Dropdown",
    value: "",
  }}
  items={[
    {
      label: "Label1",
      value: "Item1",
    },
    {
      label: "Label2",
      value: "Item2",
    },
    {
      label: "Label3",
      value: "Item3",
    },
    {
      label: "Label4",
      value: "Item4",
    },
  ]}
  onChange={(event: Event) => event}
  scale="medium"
/>

With scrollbar

When using the default medium scale, 5 options will be shown with the 6th cut off. When using the small scale, 7 options will be shown with the 8th cut off.

<PlayfulSelect
  id="DynamicPlayfulSelectWithScrollBar"
  name="DynamicPlayfulSelectWithScrollBar"
  initialSelectedItem={{
    label: "Dropdown",
    value: "",
  }}
  items={[
    {
      label: "Label1",
      value: "Item1",
    },
    {
      label: "Label2",
      value: "Item2",
    },
    {
      label: "Label3",
      value: "Item3",
    },
    {
      label: "Label4",
      value: "Item4",
    },
    {
      label: "Label5",
      value: "Item5",
    },
    {
      label: "Label6",
      value: "Item6",
    },
    {
      label: "Label7",
      value: "Item7",
    },
    {
      label: "Label8",
      value: "Item8",
    },
    {
      label: "Label9",
      value: "Item9",
    },
    {
      label: "Label10",
      value: "Item10",
    },
  ]}
  onChange={(event: Event) => event}
/>

Disabled

<PlayfulSelect
  id="DynamicPlayfulSelectDisabled"
  name="DynamicPlayfulSelectDisabled"
  initialSelectedItem={{
    label: "Dropdown",
    value: "",
  }}
  items={[
    {
      label: "Label1",
      value: "Item1",
    },
    {
      label: "Label2",
      value: "Item2",
    },
    {
      label: "Label3",
      value: "Item3",
    },
    {
      label: "Label4",
      value: "Item4",
    },
  ]}
  onChange={(event: Event) => event}
  disabled
/>

Error state

<PlayfulSelect
  id="DynamicPlayfulSelectInvalid"
  name="DynamicPlayfulSelectInvalid"
  initialSelectedItem={{
    label: "Dropdown",
    value: "",
  }}
  items={[
    {
      label: "Label1",
      value: "Item1",
    },
    {
      label: "Label2",
      value: "Item2",
    },
    {
      label: "Label3",
      value: "Item3",
    },
    {
      label: "Label4",
      value: "Item4",
    },
  ]}
  onChange={(event: Event) => event}
  invalid
/>

Props

Props	Type	Required	Values	Default
`initialSelectedItem`	`Item`	✅	-	-
`items`	`Item[]`	✅	-	-
`onChange`	`(event: Event) => void`	✅	-	-
`id`	`string`	✅	-	-
`name`	`string`	✅	-	-
`value`	`Item`		-	-
`scale`	`string`		`small` or `medium`	`small`
`disabled`	`boolean`		-	-
`invalid`	`boolean`		-	-

Types

type Item = {
  label: string;
  value: string;
};

type Event = {
  target: {
    id: string;
    name: string;
    value: string;
  };
};