Socket
Socket
Sign inDemoInstall

@patternfly/pfe-select

Package Overview
Dependencies
1
Maintainers
16
Versions
53
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @patternfly/pfe-select

Select element for PatternFly Elements


Version published
Maintainers
16
Install size
720 kB
Created

Readme

Source

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:

<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:

<pfe-select></pfe-select>

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

 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.

ValueDescription
trueSets 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 hookDescriptionDefault
--pfe-select--BackgroundColorDefault <pfe-select> background color$pfe-color--ui--lightest
--pfe-select--BorderWidthDefault <pfe-select> border width$pfe-var--ui--border-width
--pfe-select--BorderBottomWidthDefault <pfe-select> border bottom width$pfe-var--ui--border-width
--pfe-select--BorderColorDefault <pfe-select> border color$pfe-color--surface--lighter
--pfe-select--BorderBottomColorDefault <pfe-select> border bottom color$pfe-color--surface--darker
--pfe-select--BorderBottomColor--hoverBorder bottom color on <pfe-select> hover$pfe-color--surface--ui-link
--pfe-select--BorderBottomColor--errorBorder bottom color on <pfe-select> error$pfe-color--feedback--critical
--pfe-select--BorderTopDefault <pfe-select> border top$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderLeftDefault <pfe-select> border left$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderRightDefault <pfe-select> border right$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderBottomDefault <pfe-select> border bottom$pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor
--pfe-select--BorderBottom--hoverBorder bottom on <pfe-select> hover$pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor--hover
--pfe-select--BackgroundColorDefault <pfe-select> background color$pfe-color--ui--lightest
--pfe-select--ColorDefault <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 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 with Prettier to have the style rules applied on every save.

FAQs

Last updated on 01 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc