Option

Updated: May 9, 2025

The Option component represents a selectable item typically used within dropdown menus, select controls, and other interactive lists.

Option

<Option 
  label="Default option"
  value="default"
/>

Description

Add a description to provide additional context for the option.

With description

<Option 
  label="With description"
  description="This option has additional information"
  value="with-description"
/>

Prefix / Suffix

Add icons or other elements before or after the option text.

Prefix / Suffix

<Option 
  label="With prefix"
  value="with-prefix"
  prefix={<Icon icon="check" />}
/>

<Option 
  label="With suffix"
  value="with-suffix"
  suffix={<Kbd label="⌘ + K" />}
/>

States

Options can be selected, highlighted, or marked as dangerous.

States

<Option 
  label="Selected option"
  value="selected"
  selected
/>

<Option 
  label="Highlighted option"
  value="highlighted"
  highlighted
/>

<Option 
  label="Danger option"
  value="danger"
  danger
/>

As link

Options can function as links by providing the href prop.

As link

<Option 
  label="Link option"
  value="link"
  href="#"
/>

API reference

Prop	Type	Default
label	React.ReactNode	—
href	string	—
valuerequired	string	—
prefix	React.ReactNode	—
suffix	React.ReactNode	—
description	React.ReactNode	—
danger	boolean	—
selected	boolean	—
disabled Prevent selection and dim the option.	boolean	false
highlighted	boolean	—
tabIndex	number	—
children	React.ReactNode	—
onClick	(value: string) => void	—
onLinkClick	() => void	—
…and every FlexProps prop	inherited	—

ComponentsOgCard

ComponentsParticle

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club