npm package: @forter/select
Description: select from Forter Components
Author: Forter Developers
Latest version: 1.17.2

# fc-select

An element to select values from a list
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-select--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fselect) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/select/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/select) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/select/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/select) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/select/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/select)

## Usage

```html
<script>
   import '@forter/select';
</script>

<fc-select list='["-","foo","bar","zoo","loo","doo","ree","mee","faa","sol","la"]'>
</fc-select>
```

## Examples

```html
<!-- slot and value -->
<fc-select value="coolDog">
   <option value="coolDog">My Cool Dog Properties</option>
   <option value="coolCat">My Cool Cat Properties</option>
   <option value="elseValue">Else text</option>
</fc-select>
```

## Properties

| Property                         | Attribute                        | Type                  | Default  | Description                                      |
|----------------------------------|----------------------------------|-----------------------|----------|--------------------------------------------------|
| `activate`                       |                                  | `any`                 |          |                                                  |
| `clear`                          |                                  | `any`                 |          |                                                  |
| `close`                          |                                  | `any`                 |          |                                                  |
| `deactivate`                     |                                  | `any`                 |          |                                                  |
| `disabled`                       | `disabled`                       | `boolean`             | false    | If the element is disabled                       |
| `dropdownignoreoverflowclipping` | `dropdownignoreoverflowclipping` | `boolean`             | false    | If the element should ignore hiding rules such as overflow: hidden on the parent. |
| `extended`                       | `extended`                       | `"" \| "width: auto"` |          |                                                  |
| `flat`                           | `flat`                           | `boolean`             | false    | Whether the input had no depth or border         |
| `invalid`                        | `invalid`                        | `boolean`             |          | Whether the input is invalid                     |
| `item`                           |                                  | `any`                 |          |                                                  |
| `label`                          | `label`                          | `string`              |          |                                                  |
| `list`                           | `list`                           | `string`              |          | The element text for no data scenario. example: `['foo','bar']` |
| `loading`                        | `loading`                        | `boolean`             | false    | If the button is loading                         |
| `onOptionHover`                  |                                  | `any`                 |          |                                                  |
| `optionText`                     |                                  | `any`                 |          |                                                  |
| `path`                           |                                  | `string`              |          | Pre-Defined size                                 |
| `placeholder`                    | `placeholder`                    | `string`              | "Select" |                                                  |
| `required`                       | `required`                       | `boolean`             |          | If the element is required                       |
| `search`                         |                                  | `any`                 |          |                                                  |
| `select`                         |                                  | `any`                 |          |                                                  |
| `supportSecondLineOption`        | `supportSecondLineOption`        | `boolean`             | false    | If fc-select should support 2 lines of single option, instead of tooltip |
| `typing`                         |                                  | `any`                 |          |                                                  |
| `updatePosition`                 |                                  | `any`                 |          |                                                  |
| `valid`                          | `valid`                          | `boolean`             |          | Whether the input is valid                       |
| `value`                          | `value`                          | `string`              |          | Selected value. example: `foo`                   |
| `warning`                        | `warning`                        | `string`              |          |                                                  |

## Events

| Event        | Description                         |
|--------------|-------------------------------------|
| `activate`   | execute when activate a value       |
| `clear`      | execute when clear list.            |
| `close`      | execute when close list.            |
| `deactivate` | execute when activate a value       |
| `search`     | execute when searching value        |
| `select`     | execute when select value from list |
| `typing`     | execute when typing                 |

## Slots

| Name  | Description                                      |
|-------|--------------------------------------------------|
| `all` | title at top of the list. example: `<option value="coolDog">My Cool Dog Properties</option><option value="coolCat">My Cool Cat Properties</option><option value="elseValue">Else text</option>` |

## CSS Custom Properties

| Property                       | Description                     |
|--------------------------------|---------------------------------|
| `--fc-select-background-color` | background                      |
| `--fc-select-border-color`     | border-color                    |
| `--fc-select-border-radius`    | border-radius                   |
| `--fc-select-box-shadow`       | box-shadow                      |
| `--fc-select-color`            | color                           |
| `--fc-select-cursor`           | cursor                          |
| `--fc-select-disabled-color`   | disabled color. example: `gray` |
| `--fc-select-font-family`      | font-family                     |
| `--fc-select-font-size`        | font-size                       |
| `--fc-select-font-weight`      | font-weight                     |
| `--fc-select-outline`          | outline                         |
| `--fc-select-padding`          | padding                         |