Option Group

Live

Use this component inside other elements like Popover or Select to present a grouped list of items or options. Each option can be configured independently, while grouping enables flexible customisation and clearer organisation.

AA

WCAG 2.1 accessibility compliant

Option Group

Live

Use this component inside other elements like Popover or Select to present a grouped list of items or options. Each option can be configured independently, while grouping enables flexible customisation and clearer organisation.

AA

WCAG 2.1 accessibility compliant

Option Group

Use this component inside other elements like Popover or Select to present a grouped list of items or options. Each option can be configured independently, while grouping enables flexible customisation and clearer organisation.

When to use

When not to use

✅ Use up to five words

⛔️ Don't use sentences or paragraphs

Anatomy

Element

Description

  1. Selected option

Selected group option

  1. Option

Default group option

States

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Spacing

When to use

When not to use

✅ Use up to five words

⛔️ Don't use sentences or paragraphs

Anatomy

Element

Description

  1. Selected option

Selected group option

  1. Option

Default group option

States

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Spacing

When to use

When not to use

✅ Use up to five words

⛔️ Don't use sentences or paragraphs

Anatomy

Element

Description

  1. Selected option

Selected group option

  1. Option

Default group option

States

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Spacing

Continue reading

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.