Table of Contents
A segmented control groups related options and allows the user to select one at a time. Provide your own sub-components as options.
<k-segmented-control>
<k-sc-option value="small">Small</k-sc-option>
<k-sc-option value="medium">Medium</k-sc-option>
<k-sc-option value="large">Large</k-sc-option>
</k-segmented-control>
Small
Medium
Large
Set an initial value to select an option by default.
<k-segmented-control value="medium">
<k-sc-option value="small">Small</k-sc-option>
<k-sc-option value="medium">Medium</k-sc-option>
<k-sc-option value="large">Large</k-sc-option>
</k-segmented-control>
Small
Medium
Large
Get and set the selected value programmatically using JavaScript.
<k-segmented-control id="sizes" value="medium">
<k-sc-option value="small">Small</k-sc-option>
<k-sc-option value="medium">Medium</k-sc-option>
<k-sc-option value="large">Large</k-sc-option>
</k-segmented-control>
<p>Selected: <span id="output"></span></p>
<script>
const $sizes = document.getElementById('sizes');
const $output = document.getElementById('output');
$output.textContent = $sizes.value;
$sizes.addEventListener('change', (event) => {
$output.textContent = event.detail.value;
});
</script>
Small
Medium
Large
Selected:
Use any custom components as the options within the segmented control.
<k-segmented-control value="list">
<k-sc-option value="grid"><k-icon name="cards"></k-icon></k-sc-option>
<k-sc-option value="list"><k-icon name="format_list_bulleted"></k-icon></k-sc-option>
</k-segmented-control>
The segmented control integrates with HTML forms using the name attribute. The selected value is submitted with the form.
<form id="sizeForm">
<label>Size:</label>
<k-segmented-control name="size" value="medium">
<k-sc-option value="small">Small</k-sc-option>
<k-sc-option value="medium">Medium</k-sc-option>
<k-sc-option value="large">Large</k-sc-option>
</k-segmented-control>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<p>Submitted: <span id="result"></span></p>
<script>
document.getElementById('sizeForm').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
document.getElementById('result').textContent = formData.get('size');
});
</script>
new SegmentedControl();
The segmented control component is a custom element and does not require any external dependencies beyond the Kempo-UI library.
| Property |
Type |
Default |
Description |
value |
String |
'' |
The value of the currently selected option. Set this to match the `value` attribute of one of the `` children. |
name |
String |
'' |
The name attribute for form submission. When used in a form, this is the key under which the selected value is submitted. |
| Event |
Detail |
Description |
change |
{ value: String } |
Fired when the selected option changes. The detail contains the new value. |
The <k-sc-option> element represents a single option within the segmented control. It is a lightweight custom element that wraps your option content.
new SegmentedControlOption();
Attributes
| Attribute |
Type |
Required |
Description |
value |
String |
Yes |
The value identifier for this option. Should be unique among sibling options and used to select this option via the parent's value property. |
Content
The <k-sc-option> element accepts any HTML content or components as children. Common use cases include text labels or icons (e.g., <k-icon> elements).
Kempo UI