UI components · Data entry
RadioGroup
A fieldset of native radios. Group: Data entry · component 4 of 17, new in silverpoint 0.3.
States
The 2 reference states silverpoint declares for RadioGroup, 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.
selected
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpRadioGroup } from '@silverpoint/react/ui/radio-group';
<SpRadioGroup
label="Ground"
name="ground"
items={[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype' }]}
orientation="horizontal"
defaultValue="silverpoint"
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpRadioGroup } from '@silverpoint/vue/ui/radio-group';
</script>
<template>
<SpRadioGroup
label="Ground"
name="ground"
:items="[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype' }]"
orientation="horizontal"
default-value="silverpoint"
/>
</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 { SpRadioGroup } from '@silverpoint/angular/ui/radio-group';
@Component({
selector: 'app-root',
imports: [SpRadioGroup],
template: `
<sp-radio-group
label="Ground"
name="ground"
[items]="[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype' }]"
orientation="horizontal"
defaultValue="silverpoint"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_radio_group, ui_item
sp_radio_group(
label="Ground",
name="ground",
items=[
ui_item("silverpoint", "silverpoint"),
ui_item("cyanotype", "cyanotype"),
],
orientation="horizontal",
default_value="silverpoint",
)disabled-item
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpRadioGroup } from '@silverpoint/react/ui/radio-group';
<SpRadioGroup
label="Ground"
name="ground"
items={[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype', disabled: true }]}
orientation="horizontal"
defaultValue="silverpoint"
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpRadioGroup } from '@silverpoint/vue/ui/radio-group';
</script>
<template>
<SpRadioGroup
label="Ground"
name="ground"
:items="[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype', disabled: true }]"
orientation="horizontal"
default-value="silverpoint"
/>
</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 { SpRadioGroup } from '@silverpoint/angular/ui/radio-group';
@Component({
selector: 'app-root',
imports: [SpRadioGroup],
template: `
<sp-radio-group
label="Ground"
name="ground"
[items]="[{ key: 'silverpoint', label: 'silverpoint' }, { key: 'cyanotype', label: 'cyanotype', disabled: true }]"
orientation="horizontal"
defaultValue="silverpoint"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_radio_group, ui_item
sp_radio_group(
label="Ground",
name="ground",
items=[
ui_item("silverpoint", "silverpoint"),
ui_item("cyanotype", "cyanotype", disabled=True),
],
orientation="horizontal",
default_value="silverpoint",
)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 { SpRadioGroup } from '@silverpoint/react/ui/radio-group'; |
| Vue | import { SpRadioGroup } from '@silverpoint/vue/ui/radio-group'; |
| Angular | import { SpRadioGroup } from '@silverpoint/angular/ui/radio-group'; // <sp-radio-group> |
| Reflex | from reflex_silverpoint_react import sp_radio_group |
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 RadioGroup adds to the ones every UI component takes.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
items | items | items | list[dict[str, Any]] | The choices, [{key, label, disabled?}]; build them with ui_item(). Keys are unique. |
name | name | name | str | Form field name the radios submit under. Required. |
label | label | label | str | The group's name, its <legend>. Required. |
orientation | orientation | orientation | Literal['horizontal', 'vertical'] | vertical (default) or horizontal. |
value | value | value | str | None | Controlled key; None checks none. |
defaultValue | default-value | default_value | str | None | Initial key of an uncontrolled group. |
onChange | on-change | on_change | event | The key checked (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 SpRadioGroup? Open an issue on GitHub — the form comes pre-filled with the component and the version.