Option

<afp-option>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

An option component to be used within an AfpSelect.

Option

<afp-option>Option</afp-option>

<afp-option>Option</afp-option>

<AfpOption>Option</AfpOption>

<AfpOption>Option</AfpOption>

Examples #

Value #

The value attribute can be used to identify the option when it is clicked.

Toggle checked

<afp-option id="toggle-checked" value="toggle-checked">Toggle checked</afp-option>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');

    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<afp-option [id]="'toggle-checked'" [value]="'toggle-checked'">Toggle checked</afp-option>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');

    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<AfpOption id="toggle-checked" value="toggle-checked">Toggle checked</AfpOption>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');

    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<AfpOption :id="'toggle-checked'" :value="'toggle-checked'">Toggle checked</AfpOption>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');

    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

Checked #

Use the checked attribute to indicate the checked state of the option.

Checked Option

<afp-option checked>Checked Option</afp-option>

<afp-option checked>Checked Option</afp-option>

<AfpOption checked>Checked Option</AfpOption>

<AfpOption checked>Checked Option</AfpOption>

Closeable #

Use the closeable attribute to add a close button to the option.

Closeable Option

<afp-option closeable>Closeable Option</afp-option>

<afp-option closeable>Closeable Option</afp-option>

<AfpOption closeable>Closeable Option</AfpOption>

<AfpOption closeable>Closeable Option</AfpOption>

Disabled #

Use the disabled attribute to disable the option.

Disabled Option

<afp-option disabled>Disabled Option</afp-option>

<afp-option disabled>Disabled Option</afp-option>

<AfpOption disabled>Disabled Option</AfpOption>

<AfpOption disabled>Disabled Option</AfpOption>

Custom Icons #

Use the check-icon and close-icon slots to provide custom icons for the checked and close states.

Option with Custom Icon

<afp-option checked closeable>
  Option with Custom Icon
  <afp-icon slot="check-icon" name="x"></afp-icon>
  <afp-icon slot="close-icon" name="check"></afp-icon>
</afp-option>

<afp-option checked closeable>
  Option with Custom Icon
  <afp-icon [slot]="'check-icon'" [name]="'x'"></afp-icon>
  <afp-icon [slot]="'close-icon'" [name]="'check'"></afp-icon>
</afp-option>

<AfpOption checked closeable>
  Option with Custom Icon
  <AfpIcon slot="check-icon" name="x"></AfpIcon>
  <AfpIcon slot="close-icon" name="check"></AfpIcon>
</AfpOption>

<AfpOption checked closeable>
  Option with Custom Icon
  <AfpIcon :slot="'check-icon'" :name="'x'"></AfpIcon>
  <AfpIcon :slot="'close-icon'" :name="'check'"></AfpIcon>
</AfpOption>

Properties

Learn more about properties.

Name Description Reflects

value

The value associated with the option. This is emitted with the afp-click event.

Type string

checked

Indicates whether the option is checked.

Type boolean

Default false

disabled

Indicates whether the option is disabled.

Type boolean

Default false

closeable

Indicates whether the option is closeable.

Type boolean

Default false

size

Size of the option.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

Methods

Learn more about using methods.

Name	Description	Arguments
`focus`	Sets focus on the option component.	`options<FocusOptions>` — Focus options.
`getClonedContentNodes`	Returns cloned content nodes of the option component, excluding empty text nodes. Return `Node[]`	-

Events

Learn more about events.

Name	Return	Description
`afp-click`	`string`	Emitted when the option is clicked.
`afp-close`	`void`	Emitted when the option's close icon is clicked. Only emitted if the option is closeable.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`check-icon`	Slot to replace the default check icon.
`close-icon`	Slot to replace the default close icon.

Internationalization

Learn more about internationalization.

Key	Description
`option.close-button.aria-label`	The default `aria-label` text for the option close icon.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`content`	The content wrapper.	`::part(content)`
`checked`	The checked icon wrapper.	`::part(checked)`
`check-icon`	The check icon.	`::part(check-icon)`
`label`	The label wrapper.	`::part(label)`
`close-button`	The close icon wrapper.	`::part(close-button)`
`close-icon`	The close icon.	`::part(close-icon)`
`actions`	The wrapper for the checked and close icons.	`::part(actions)`

CSS Custom Properties

Name	Description	Default
`--afp-option-checked-min-width`	The minimum width of the checked icon area.	`1.125rem`
`--afp-option-disabled-opacity`	The opacity of a disabled option.	`0.5`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`check-icon` - The check icon. `close-icon` - The close icon.
afp-button	`close-button` - The close icon wrapper.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/option/option.js';