Select
======

*   GitHub: [BonnierNews/dn-design-system/web/src/components/select](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/select)
*   Storybook: [Form > Select](https://designsystem.dn.se/?path=/docs/basic-form-select--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/select/select";`

| Name | Description | Default |
|:--- | :--- | :--- |
| name\* | It's used as name and id<br />string | \- |
| label\* | A label for the input<br />string | \- |
| error | Used if error state shoud be set on load<br />boolean | \- |
| errorMessage | What error message that should be displayed<br />string | \- |
| required | boolean | \- |
| disabled | Set to true if the field should be disabled<br />boolean | \- |
| validation | To use with the sites validation, some example values for dn-web: required, password, email<br />string | \- |
| helpText | A helptext for the field if needed<br />string | \- |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
| autofocus | Set to true if field should have focus when loaded<br />boolean | \- |
| options | Ex. { data-prop: value }<br />{ value: string; label: string; }\[\] | \- |
| classNames | Ex. "my-special-class"<br />string | ", " |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<Select
  label="Välj en måltid"
  name="select-meal"
  options={[
    {
      label: 'Lasagne',
      value: 'option1'
    },
    {
      label: 'Pizza',
      value: 'option2'
    },
    {
      label: 'Skagenröra',
      value: 'option3'
    }
  ]}
/>
```