Segment

The Segment component lets you render a set of mutually-exclusive options in your UI, where only one choice can be selected at a time. It functions the same way as the Radio component Under the hood it uses Solid’s context API and it works in conjunction with the Segment.Button slot.

For more information about the Segment.Button slot, check out the Segment.Button documentation.

Usage

To create a Segment options in your UI, you need to wrap the Segment.Button slots with the Segment component.

import Segment from '@components/Basic/Segment';

const App = () => {
    return (
        <>
            <Segment>
                <Segment.Button selected value="red">red</Segment.Button>
                <Segment.Button value="green">green</Segment.Button>
                <Segment.Button value="blue">blue</Segment.Button>
            </Segment>
        </>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component.
ref	SegmentRef | undefined	undefined	A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to set the selected option programmatically.
disabled	boolean	false	Specify if the Segment is disabled.
class-selected	string	""	Additional CSS classes applied when the button option is selected.
class-disabled	string	""	Additional CSS classes to apply to the component when disabled.
onChange	(selected: string) => void	undefined	A function that is called every time the selected option changes. It can be used to retrieve the selected option’s value.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Extends or overrides the component’s default navigation action handlers. See Implemented Navigation Actions for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, the segment’s actions will execute. Can be a CSS selector or HTMLElement.

Ref API

To interact with the Segment programmatically, you can use the SegmentRef interface. This interface provides properties and methods to access and manipulate the component’s state.

Properties

Property	Type	Description
element	HTMLDivElement	A reference to the segment’s root HTML element, useful for DOM access or styling.
selected	Accessor<string>	The currently selected option. Use selected() to get the value.

Methods

Method	Parameters	Return Value	Description
selectOption	newOption: string	void	Programmatically change the selected option.
changeSelected	direction: prev | next	void	Programmatically change the selected option to the previous or next one.

Slots

Segment.Indicator

Allows customization of the segment’s indicator element which is responsible for the transition when the selected option is switched. This slot can be used to customize the element’s appereance.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the segment indicator.
class	string	""	Additional CSS classes to style the segment indicator.

Caution

When you customize the styles of Segment.Indicator, you must also apply the same styles to the ::before pseudo-element of Segment.Button.
This is because, on initial render, the indicator is visually represented by the button’s ::before element.
If you only style the indicator, you may see inconsistent appearance until the first selection change.

You can customize it like:

.indicator {
    background-color: green;
}
.segment-button::before {
    background-color: green !important;
}

Usage

In the following example, we are going to change the background color of the indicator and apply a custom class.

import Radio from '@components/Basic/RadioGroup/Radio';

const App = () => {
    return (
        <Segment>
            <Segment.Button value='Easy'>Easy</Segment.Button>
            <Segment.Button value='Medium'>Medium</Segment.Button>
            <Segment.Button disabled value='Hard'>Hard</Segment.Button>
            <Segment.Button selected value='Very Hard'>Very Hard ;)</Segment.Button>
           <Segment.Indicator style={{ 'background-color': 'red'}} class={styles['Custom-Indicator']}></Segment.Indicator>
        </Segment>
    );
};

export default App;

Implemented Navigation Actions

The Segment component implements the following navigation actions by default:

Action Name	Behavior
move-left	Moves the selected option to the previous one
move-right	Moves the selected option to the next one

You can extend the Segment with additional navigation actions or override the default behavior using the onAction prop:

import Segment from '@components/Basic/Segment/Segment';

<Segment
    onAction={{
        'select': () => console.log('Segment item confirmed!'),
        'move-left': () => console.log('Custom previous logic')  // overrides default move-left behavior
    }}
>
    <Segment.Button value="option1">Option 1</Segment.Button>
    <Segment.Button value="option2">Option 2</Segment.Button>
</Segment>

Using an anchor element lets the Segment respond to navigation actions when another element is focused:

<div id="difficulty" class="menu-item">
    <div>Select Difficulty:</div>
    <Segment anchor=".menu-item" onChange={handleChange}>
        <Segment.Button value='Easy'>Easy</Segment.Button>
        <Segment.Button value='Normal' selected>Normal</Segment.Button>
        <Segment.Button value='Hard'>Hard</Segment.Button>
    </Segment>
</div>

Guide

Retrieve the value of the selected option when it changes

To retrieve the value of the selected option:

• Use the onChange prop to respond when the selected option changes

Steps

1. Provide a callback to the onChange prop to respond to state changes.
2. Inside the callback, access the selected option’s value via the selected argument.

import Segment from '@components/Basic/Segment';

const App = () => {
    const getValue = (selected: string) => {
        console.log(selected);
    }

    return (
        <>
            <Segment onChange={getValue}>
                <Segment.Button selected value="red">red</Segment.Button>
                <Segment.Button value="green">green</Segment.Button>
                <Segment.Button value="blue">blue</Segment.Button>
            </Segment>
        </>
    );
};

export default App;

Set the selected option programmatically

The Segment component lets you set the selected option through code.

Steps

1. Declare a ref variable with type SegmentRef and pass it to the Segment component.
2. Call ref.selectOption() from anywhere (e.g., a keyboard event or external button) to set a new selected option programmatically.

import Segment, { SegmentRef } from '@components/Basic/Segment';

const App = () => {
    let SegmentRef!: SegmentRef;

    const handleKeyPress = (e: KeyboardEvent) => {
        if (e.keyCode !== 13) return

        SegmentRef.selectOption('green');
    }

    return (
        <>
            <Segment ref={SegmentRef} keypress={handleKeyPress}>
                <Segment.Button selected value="red">red</Segment.Button>
                <Segment.Button value="green">green</Segment.Button>
                <Segment.Button value="blue">blue</Segment.Button>
            </Segment>
        </>
    );
};

export default App;

Tip

To dynamically render options, you can use an array and map over it:

const options = [
    {value: 'option-1', text: 'Option 1', selected: true, disabled: false},
    {value: 'option-2', text: 'Option 2', selected: false}
    ...
];
...
<Segment>
    {options.map((option) => (
        <Segment.Button selected={option.selected} disabled={option.disabled} value={option.value}>
            {option.text}
        </Segment.Button>
    ))}
</Segment>

Alternatively, you can use the SolidJS For component:

const options = [
    {value: 'option-1', text: 'Option 1', selected: true, disabled: false},
    {value: 'option-2', text: 'Option 2', selected: false}
    ...
];
...
<Segment>
    <For each={options}>
        {(option) => (
            <Segment.Button selected={option.selected} disabled={option.disabled} value={option.value}>
                {option.text}
            </Segment.Button>
        )}
    </For>
</Segment>