UI components · Data entry
Segmented
Native radios in one frame. Group: Data entry · component 8 of 17, new in silverpoint 0.3.
States
The 2 reference states silverpoint declares for Segmented, live on both grounds, with their code. As in upstream's documentation the examples are uncontrolled: the state's value is the default value. Pick a framework once and every example on the site follows it.
first
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSegmented } from '@silverpoint/react/ui/segmented';
<SpSegmented
label="Period"
name="period"
items={[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]}
defaultValue="day"
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSegmented } from '@silverpoint/vue/ui/segmented';
</script>
<template>
<SpSegmented
label="Period"
name="period"
:items="[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]"
default-value="day"
/>
</template>// src/styles.css:
// @import '@silverpoint/fonts/fonts.css';
// @import '@silverpoint/grounds/styles.css';
// @import '@silverpoint/grounds/ui.css';
import { Component } from '@angular/core';
import { SpSegmented } from '@silverpoint/angular/ui/segmented';
@Component({
selector: 'app-root',
imports: [SpSegmented],
template: `
<sp-segmented
label="Period"
name="period"
[items]="[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]"
defaultValue="day"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_segmented, ui_item
sp_segmented(
label="Period",
name="period",
items=[
ui_item("day", "Day"),
ui_item("week", "Week"),
ui_item("month", "Month"),
ui_item("year", "Year"),
],
default_value="day",
)middle
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSegmented } from '@silverpoint/react/ui/segmented';
<SpSegmented
label="Period"
name="period"
items={[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]}
defaultValue="week"
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSegmented } from '@silverpoint/vue/ui/segmented';
</script>
<template>
<SpSegmented
label="Period"
name="period"
:items="[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]"
default-value="week"
/>
</template>// src/styles.css:
// @import '@silverpoint/fonts/fonts.css';
// @import '@silverpoint/grounds/styles.css';
// @import '@silverpoint/grounds/ui.css';
import { Component } from '@angular/core';
import { SpSegmented } from '@silverpoint/angular/ui/segmented';
@Component({
selector: 'app-root',
imports: [SpSegmented],
template: `
<sp-segmented
label="Period"
name="period"
[items]="[{ key: 'day', label: 'Day' }, { key: 'week', label: 'Week' }, { key: 'month', label: 'Month' }, { key: 'year', label: 'Year' }]"
defaultValue="week"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_segmented, ui_item
sp_segmented(
label="Period",
name="period",
items=[
ui_item("day", "Day"),
ui_item("week", "Week"),
ui_item("month", "Month"),
ui_item("year", "Year"),
],
default_value="week",
)Import
Each component has its own subpath under ui/, and every adapter exports them all from ui. Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you.
| Framework | Import |
|---|---|
| React | import { SpSegmented } from '@silverpoint/react/ui/segmented'; |
| Vue | import { SpSegmented } from '@silverpoint/vue/ui/segmented'; |
| Angular | import { SpSegmented } from '@silverpoint/angular/ui/segmented'; // <sp-segmented> |
| Reflex | from reflex_silverpoint_react import sp_segmented |
Binding the value
Controlled or uncontrolled, the way each framework does it. The change event carries the new value itself (a string, a bool or a number), never a DOM event.
| Framework | Controlled | Uncontrolled |
|---|---|---|
| React | value / onChange | defaultValue |
| Vue | v-model="x" | default-value |
| Angular | [(value)]="x", ngModel, formControl | [defaultValue] |
| Reflex | value=State.x, on_change=State.set_x | default_value=… |
Props
The props Segmented adds to the ones every UI component takes.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
items | items | items | list[dict[str, Any]] | The options, [{key, label, disabled?}]; build them with ui_item(). |
label | label | label | str | The control's name, its <legend>. Required. |
name | name | name | str | Form field name; the native radios submit under it. |
block | block | block | bool | Fills the width of its container. |
value | value | value | str | Controlled key; an unknown one shows the first enabled segment. |
defaultValue | default-value | default_value | str | Initial key of an uncontrolled control. |
onChange | on-change | on_change | event | The key selected (a string). |
Common props
Every UI component also takes these. Like a chart's, they fall back to the dashboard the component sits in, then to the provider. Read more about the UI components.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
id | id | id | str | The frame variant and every related id derive from it. |
ground | ground | ground | Literal['silverpoint', 'cyanotype'] | str | dict[str, Any] | Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint. |
substrate | substrate | substrate | Literal['cream', 'green', 'blue', 'ochre', 'prussian'] | Prepared substrate within the ground. |
mode | mode | mode | Literal['ink', 'precision'] | ink by default; precision disables inking. |
seed | seed | seed | str | int | Seed of the frame's hand; overrides id for the frame variant only. |
size | size | size | Literal['sm', 'md', 'lg'] | Control size: sm, md (default) or lg. |
palette | palette | palette | dict[str, str] | Colours over the ground's (set with palette=), merged over the dashboard's and the provider's. |
className | class-name | class_name | str | Added to the component's root element, after its own classes. |
Report it
Found something wrong with SpSegmented? Open an issue on GitHub — the form comes pre-filled with the component and the version.