Segmented Controls
Segmented Controls are used for areas of the UI that require simple configuration options in a compact manner
Last updated
Segmented Controls are used for areas of the UI that require simple configuration options in a compact manner
Last updated
Segmented controls are ideal when users need to choose between a few distinct options, such as in settings panels, toolbars, or other interfaces requiring quick configuration changes. They work well for toggling between related options where only one selection is allowed at a time.
Segmented controls present a series of related options in a compact, unified interface. Users select one option, which updates the control’s state to reflect their choice. Each segment displays different states—such as selected or unselected—providing clear visual feedback on the current configuration.
component_mode
Optional parameter that defines a specific mode or variant of the component. options are 'light' or 'dark'.
string
custom_class
Additional CSS class(es) to be applied to the segmented tabs container. Allows for custom styling and modifications.
string
items
A JSON string that will be parsed into an array of strings. Each string represents a tab item. If an item starts with 'fo', it will be rendered as a Material Icons icon; otherwise, it will be rendered as text.
Example: '["Home", "fohouse", "Settings"]'
string
radius_type
Determines the border radius styling of the segmented tabs group. Applied as a CSS class to the container element.
Example: 'rounded' or 'square'
string
Lead-Icon: Positioned at the start of the segmented control to provide a visual cue related to the content.
Segment Label: Describes the segment, indicating different sections within the control (e.g., "All," "Recent," "Saved").
Divider: Separates the segments visually, creating clear boundaries between each selectable option.
Trail-Icon: Positioned at the end of the segmented control, providing an additional visual element for context or functionality.
Dos
Don'ts
Use segmented controls to group related options that are mutually exclusive.
Don't use segmented controls for actions that can be performed simultaneously.
Label each segment clearly to indicate its purpose.
Avoid using vague or unclear labels for segments.
Ensure each segment is large enough to be easily tapped or clicked.
Don't make segments too small to interact with comfortably.
Use segmented controls in contexts where quick and frequent configuration changes are needed.
Avoid using segmented controls for complex configurations that require detailed input.
Provide visual feedback to indicate the selected segment.
Don't leave the user guessing which segment is currently selected.
Keep the number of segments manageable to avoid overwhelming the user.
Don't use too many segments, which can reduce usability and clarity.
