The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
Option
<pc-option> Options define the selectable items within various form controls such as a select.
Additional demonstrations can be found in the select demos.
Properties#
| Name | Description | Reflects | Default |
|---|---|---|---|
value | The option’s value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values must not contain spaces, as spaces are used as delimiters when listing multiple values. Type: string |
| "" |
disabled | Disables the option, preventing selection. Type: boolean |
| false |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about attributes and properties.
Slots#
| Name | Description |
|---|---|
| (default) | The option’s label. |
prefix | Used to prepend an icon or similar element to the option. |
suffix | Used to append an icon or similar element to the option. |
Learn more about using slots.
Methods#
| Name | Description | Arguments |
|---|---|---|
getTextLabel() | Returns a plain text label based on the option’s content. | ‐ |
Learn more about methods.
Parts#
| Name | Description |
|---|---|
checked-icon | The checked icon, a <pc-icon> element. |
base | The component’s base wrapper. |
label | The option’s label. |
prefix | The container that wraps the prefix. |
suffix | The container that wraps the suffix. |
Learn more about customising CSS parts.
Importing#
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/option/option.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/option/option.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/option/option.js";Dependencies#
This component automatically imports these components: