@patternfly/pfe-select v1.12.3
PatternFly Elements Select
The select component provides a way to create list of options in a form.
Read more about Select in the PatternFly Elements Select documentation
Installation
Load <pfe-select>
via CDN:
<script src="https://unpkg.com/@patternfly/pfe-select?module"></script>
Or, if you are using NPM, install it
npm install @patternfly/pfe-select
Then once installed, import it to your application:
import '@patternfly/pfe-select';
Usage
There are 3 ways of providing options to your component:
- Users can provide options using
<select>
element inside<pfe-select>
- Users can set custom options as an array of objects on the element's
options
property - Users can append more options by using the element's
addOptions()
method
Note: <pfe-select>
component can also be used in places where dropdowns are needed but its more suitable for forms. For dropdowns, <pfe-dropdown>
is preferred.
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 options
setter to set the options as shown in snippet below:
const select = document.querySelector("pfe-select");
select.options = [
{ 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}
];
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago