Option Dot

Example

Import

JavaScript

import '@sbddesign/bui-ui/option-dot.js'

React

import { BuiOptionDotReact as BuiOptionDot } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<div style="display: flex; flex-direction: row; gap: 12px;">
    <bui-option-dot active></bui-option-dot>
    <bui-option-dot></bui-option-dot>
    <bui-option-dot></bui-option-dot>
</div>

React

<div style="display: flex; flex-direction: row; gap: 12px;">
    <BuiOptionDot active></BuiOptionDot>
    <BuiOptionDot></BuiOptionDot>
    <BuiOptionDot></BuiOptionDot>
</div>

Properties

Property	Attribute	Type	Required	Reflected	Description
active	active	boolean	No	Yes	Whether the option dot is active/selected

Behavior

• Active State: The active property controls whether the dot appears selected or unselected
• Visual Indicator: Used as a visual indicator for selected options in lists or groups
• Attribute Conversion: The component handles boolean to string conversion for HTML attributes
• State Management: The active property is reflected, so it stays in sync with the HTML attribute
• Simple Toggle: Designed for simple on/off visual states

Events

The option dot component does not emit custom events. It behaves as a standard HTML element for displaying selection state.