# @patternfly/pfe-select

> Select element for PatternFly Elements

Latest version **1.12.3** (published 2022-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @patternfly/pfe-select
pnpm add @patternfly/pfe-select
yarn add @patternfly/pfe-select
bun add @patternfly/pfe-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.12.3 |
| Published | 2022-02-01 |
| First published | 2019-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 276.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Diwanshi Pandey |
| Maintainers | ctrowbri, dgutride, dlabrecq, patternfly-build, jeff-phillips-18, mturley, mwcz, kylebuch8, realredallen, ktotten, evwilkin, schulj12, castastrophe, nicolethoen, heymp, zhawkins |

## Links

- npm: https://www.npmjs.com/package/@patternfly/pfe-select
- Issues: https://github.com/patternfly/patternfly-elements/issues
- npm.io page: https://npm.io/package/@patternfly/pfe-select

## Dependencies (1)

- [@patternfly/pfelement](https://npm.io/package/@patternfly/pfelement.md) ^1.12.3

## Recent versions

- 1.12.3 (latest) — 2022-02-01
- 2.0.0-next.5 (next) — 2022-10-25
- 2.0.0-next.4 — 2022-08-23
- 2.0.0-next.3 — 2022-04-18
- 2.0.0-next.2 — 2022-03-23
- 2.0.0-next.1 — 2022-03-04
- 2.0.0-next.0 — 2022-02-23
- 1.12.2 — 2021-11-16
- 1.12.1 — 2021-11-16
- 1.12.0 — 2021-11-12
- 1.11.2 — 2021-09-29
- 1.11.1 — 2021-09-03
- 1.11.0 — 2021-08-18
- 1.10.1 — 2021-07-12
- 1.10.0 — 2021-07-08
- … 38 more at https://npm.io/package/@patternfly/pfe-select/versions

## README

# PatternFly Element | Select Element

The select component provides a way to create list of options in a form.

There are 3 ways of providing options to your component:

- Users can provide options using ```<select>``` element inside ```<pfe-select>```
- Users can pass custom options as an array of objects to the `pfeOptions` setter function
- Users can append more options by using an `addOptions()` API

Note: pfe-select component can also be used in places where dropdowns are needed but its more suitable for forms. For dropdowns, there will be a separate component.

## Usage

With `<select>` element:

```html
<pfe-select>
  <select>
    <option disabled>Please select an option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</pfe-select>
```
Without `<select>` element:

```html
<pfe-select></pfe-select>
```

For custom options, use the `pfeOptions` setter function to set the options as shown in snippet below:

```js
 let selectWithJSOptionsOnly = document.querySelector("pfe-select");
  customElements.whenDefined("pfe-select").then(() => {
    selectWithJSOptionsOnly.pfeOptions = [
      { text: "Please select an option", value: "", selected: true },
      { text: 'One', value: '1', selected: false },
      { text: 'Two', value: '2', selected: false },
      { text: 'Three', value: '3', selected: false}
    ];
  });
```

## Slots

### Default slot in pfe-select

Place your `<select>` element with or without `<option>`s' here.

## Attributes

**`invalid`**
Changes the color and width of border-bottom of `<pfe-select>`.  `invalid` is a Boolean attribute, so its presence indicates `true`, and its absence indicates `false`.

| Value             | Description                                                               |
| ----------------- | ------------------------------------------------------------------------- |
| `true`            | Sets the border-bottom-color to `feedback--critical` theme color and border-bottom-width to 2px |
| `false` (default) | Sets the border-bottom-color to `surface--darker` theme color and border-bottom-width to default 1px         |

## Styling


| Theme hook                                        | Description                                               | Default                                     |
| ----------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------- |
| `--pfe-select--BackgroundColor`                       | Default `<pfe-select>` background color                   | $pfe-color--ui--lightest                  |
| `--pfe-select--BorderWidth`                           | Default `<pfe-select>` border width                       | $pfe-var--ui--border-width                |
| `--pfe-select--BorderBottomWidth`                     | Default `<pfe-select>` border bottom width                | $pfe-var--ui--border-width                |
| `--pfe-select--BorderColor`                           | Default `<pfe-select>` border color                       | $pfe-color--surface--lighter              |
| `--pfe-select--BorderBottomColor`                     | Default `<pfe-select>` border bottom color                | $pfe-color--surface--darker               |
| `--pfe-select--BorderBottomColor--hover`              | Border bottom color on `<pfe-select>` hover               | $pfe-color--surface--ui-link              |
| `--pfe-select--BorderBottomColor--error`              | Border bottom color on `<pfe-select>` error               | $pfe-color--feedback--critical            |
| `--pfe-select--BorderTop`                             | Default `<pfe-select>` border top                         | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor                                                                                                                               |
| `--pfe-select--BorderLeft`                            | Default `<pfe-select>` border left                        | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor                                                                                                                               |
| `--pfe-select--BorderRight`                           | Default `<pfe-select>` border right                       | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor                                                                                                                               |
| `--pfe-select--BorderBottom`                          | Default `<pfe-select>` border bottom                      | $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor                                                                                              |
| `--pfe-select--BorderBottom--hover`                   | Border bottom on `<pfe-select>` hover                     | $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor--hover                                                                                       |
| `--pfe-select--BackgroundColor`                       | Default `<pfe-select>` background color                   | $pfe-color--ui--lightest                  |
| `--pfe-select--Color`                                 | Default `<pfe-select>` color                              | $pfe-color--text                          |

## Events

### pfe-select:change

Fires when an option is selected or deselected. The detail object contains the
following

```
detail: {
  value: String
}
```

## Test

    npm run test

## Build

    npm run build

## Demo

From the PFElements root directory, run:

    npm start

## Code style

Select (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[web-component-tester]: https://github.com/Polymer/web-component-tester

---
_Source: https://npm.io/package/@patternfly/pfe-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._