import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as SelectStories from "./Select.stories";

<Meta of={SelectStories} />

# Select

The Select component is a user interface element that allows users to choose one or multiple options from a predefined list. It simplifies data input by presenting a structured selection, reducing errors, and improving usability.

## Usage

<Canvas of={SelectStories.Documentation} source={ { code: `
import React, { useState } from "react";

import { Select } from "@webiny/admin-ui";

const SelectExample = () => {
const [value, setValue] = useState("");

    return (
        <Select
            label="Time Zone"
            description="Select your preferred time zone"
            note="This setting will affect how times are displayed throughout the application"
            required={true}
            options={[
                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
                { value: "CST", label: "Central Standard Time (UTC-6)" },
                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
                { value: "CET", label: "Central European Time (UTC+1)" },
                { value: "IST", label: "India Standard Time (UTC+5:30)" }
            ]}
            value={value}
            onChange={setValue}
        />
    );

};

export default SelectExample;

`} }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Select/Select.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={SelectStories.Documentation} exclude={["onChange", "onOpenChange"]} />

```jsx
import React, { useState } from "react";

import { Select } from "@webiny/admin-ui";

const SelectExample = () => {
  const [value, setValue] = useState("");

  return (
    <Select
      label="Time Zone"
      description="Select your preferred time zone"
      note="This setting will affect how times are displayed throughout the application"
      required={true}
      options={[
        { value: "EST", label: "Eastern Standard Time (UTC-5)" },
        { value: "CST", label: "Central Standard Time (UTC-6)" },
        { value: "PST", label: "Pacific Standard Time (UTC-8)" },
        { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
        { value: "CET", label: "Central European Time (UTC+1)" },
        { value: "IST", label: "India Standard Time (UTC+5:30)" }
      ]}
      value={value}
      onChange={setValue}
    />
  );
};

export default SelectExample;
```

## Anatomy

### Select Anatomy

<img src="/images/storybook/select/anatomy.png" alt="Select Anatomy" />

### Styles

<img src="/images/storybook/select/styles.png" alt="Styles" />

### Options

<img src="/images/storybook/select/options.png" alt="Options" />

### States and Styles

<img src="/images/storybook/select/states-and-styles.png" alt="States and Styles" />

### Label Anatomy

<img src="/images/storybook/select/label-anatomy.png" alt="Label Anatomy" />

### Label Properties

<img src="/images/storybook/select/label-properties.png" alt="Label Properties" />

### Label Options

<img src="/images/storybook/select/label-options.png" alt="Label Options" />

## Usage

### Used in forms

<img src="/images/storybook/select/used-in-forms.png" alt="Used in forms" />