UI components
UI component reference
The 17 form and display components silverpoint has shipped since 0.3 in React, Vue and Angular (and in Reflex through reflex-silverpoint-react), drawn with the charts' language: an exact frame, tone by hatching or by line weight, keyboard and screen-reader semantics from the native element. The 21 composed components and overlays of 0.7 are indexed at the end.
Actions1componentsData entry7componentsData display4componentsFeedback3components
17in total · 45 states
Actions
A native button, or a link drawn as one.
Button4 states
A native button, or a link with href.
Data entry
Native inputs, checkboxes, radios and ranges in hand-drawn frames: forms submit natively.
Input4 states
A native text input in a framed box.
Checkbox4 states
A native checkbox with an exact tick or dash.
RadioGroup2 states
A fieldset of native radios.
Switch3 states
A native checkbox with role switch.
Slider2 states
A native range over an exact rail, with marks.
Rate2 states
Native radios 1..count, each an exact lozenge.
Segmented2 states
Native radios in one frame.
Navigation
Tabs with their panels and an ordered list of steps, with the WAI-ARIA keyboard patterns.
Data display
Cards, toned tags, counting badges and captioned rules.
Feedback
Progress as a line or a circle, alerts by kind, and loading placeholders.
All components
| Component | Group | What it is | React subpath | Angular selector | Reflex |
|---|---|---|---|---|---|
| Button | Actions | A native button, or a link with href. | @silverpoint/react/ui/button | button[spButton] | sp_button |
| Input | Data entry | A native text input in a framed box. | @silverpoint/react/ui/input | sp-input | sp_input |
| Checkbox | Data entry | A native checkbox with an exact tick or dash. | @silverpoint/react/ui/checkbox | sp-checkbox | sp_checkbox |
| RadioGroup | Data entry | A fieldset of native radios. | @silverpoint/react/ui/radio-group | sp-radio-group | sp_radio_group |
| Switch | Data entry | A native checkbox with role switch. | @silverpoint/react/ui/switch | sp-switch | sp_switch |
| Slider | Data entry | A native range over an exact rail, with marks. | @silverpoint/react/ui/slider | sp-slider | sp_slider |
| Rate | Data entry | Native radios 1..count, each an exact lozenge. | @silverpoint/react/ui/rate | sp-rate | sp_rate |
| Segmented | Data entry | Native radios in one frame. | @silverpoint/react/ui/segmented | sp-segmented | sp_segmented |
| Tabs | Navigation | A tablist of native buttons, with tab panels. | @silverpoint/react/ui/tabs | sp-tabs | sp_tabs |
| Steps | Navigation | An ordered list of steps with their status. | @silverpoint/react/ui/steps | sp-steps | sp_steps |
| Card | Data display | A framed card with header, body and footer. | @silverpoint/react/ui/card | sp-card | sp_card |
| Tag | Data display | A framed, toned label; closable. | @silverpoint/react/ui/tag | sp-tag | sp_tag |
| Badge | Data display | A count or a dot beside its content. | @silverpoint/react/ui/badge | sp-badge | sp_badge |
| Divider | Data display | A rule, optionally captioned. | @silverpoint/react/ui/divider | sp-divider | sp_divider |
| Progress | Feedback | A progressbar, a line or a circle. | @silverpoint/react/ui/progress | sp-progress | sp_progress |
| Alert | Feedback | An alert or a status by kind; closable. | @silverpoint/react/ui/alert | sp-alert | sp_alert |
| Skeleton | Feedback | A loading placeholder. | @silverpoint/react/ui/skeleton | sp-skeleton | sp_skeleton |
Composed components and overlays (0.7)
silverpoint 0.8.0 adds 21 more on the same subpaths, for 38 in all: SpSurface and SpGlyph, the building blocks, the composed components and the overlays. Each has a page with a live demo, its code in React, Vue, Angular and Reflex, its events and its props; Composed components shows them all on one page.
| Component | What it is | React subpath | Angular selector | Reflex |
|---|---|---|---|---|
| SpSurface | The root contract on any element: the ground's class, a hand-drawn frame (control, pill, box, card or round) and a hatched tone (1–4, or a state such as selected or primary). | @silverpoint/react/ui/surface | [spSurface] | sp_surface |
| SpGlyph | One exact 16×16 mark of UI_GLYPHS — tick, cross, chevrons, arrows, sort marks… — stroked with the text colour, never inked. | @silverpoint/react/ui/glyph | sp-glyph | sp_glyph |
| SpTable | Card-framed table: small-caps header, tabular figures, hatched striping, sortable headers with aria-sort. | @silverpoint/react/ui/table | sp-table | sp_table · sort_rows |
| SpPagination | Previous and next, first and last, a window around the current page (heightened); on_change(page). | @silverpoint/react/ui/pagination | sp-pagination | sp_pagination |
| SpBreadcrumb | A <nav> of links separated by hairline slashes; the last item is the current page. | @silverpoint/react/ui/breadcrumb | sp-breadcrumb | sp_breadcrumb |
| SpAvatar · SpAvatarGroup | A portrait or the person's initials in a drawn round (or square) frame; groups overlap. | @silverpoint/react/ui/avatar | sp-avatar · sp-avatar-group | sp_avatar · sp_avatar_group |
| SpStatistic | A small-caps title, a large tabular figure, prefix and suffix, and a trend arrow. | @silverpoint/react/ui/statistic | sp-statistic | sp_statistic |
| SpDescriptions | A label–value grid (a <dl>), optionally card-framed; one column on narrow containers. | @silverpoint/react/ui/descriptions | sp-descriptions | sp_descriptions |
| SpTimelineList | A vertical list of events: done (hatched), current (heightened), pending and error. | @silverpoint/react/ui/timeline-list | sp-timeline-list | sp_timeline_list |
| SpCollapse · SpCollapseItem | Panels that open and close, on native <details>; accordion=True keeps one open. | @silverpoint/react/ui/collapse | sp-collapse · sp-collapse-item | sp_collapse · sp_collapse_item |
| SpEmpty | The empty state: a lightly hatched, drawn tray, a line of italic text and actions. | @silverpoint/react/ui/empty | sp-empty | sp_empty |
| SpResult | The outcome of an operation: a drawn round mark (tick, info, warning, cross), title and subtitle. | @silverpoint/react/ui/result | sp-result | sp_result |
| SpTextarea | Multi-line text on the SpInput contract: drawn frame, italic placeholder, counter and message. | @silverpoint/react/ui/textarea | sp-textarea | sp_textarea |
| SpInputNumber | A number field with exact − and + steppers, clamped to min and max; on_change receives the number. | @silverpoint/react/ui/input-number | sp-input-number | sp_input_number |
| SpModal | A dialog on a card frame over a hatched backdrop: focus trapped, Escape closes it. | @silverpoint/react/ui/modal | sp-modal | sp_modal |
| SpDrawer | The same dialog, sliding in from any edge (side='end', the default, 'start', 'top' or 'bottom'). | @silverpoint/react/ui/drawer | sp-drawer | sp_drawer |
| SpPopover | Anchored content on a card frame, placed by the core on the Popover API; Escape or a click outside closes it. | @silverpoint/react/ui/popover | sp-popover | sp_popover |
| SpTooltip | A short label shown on hover or keyboard focus, after a delay. | @silverpoint/react/ui/tooltip | sp-tooltip | sp_tooltip |
| SpSelect | A single choice with typeahead: the chosen option ticked, the highlighted one heightened. | @silverpoint/react/ui/select | sp-select | sp_select |
| SpDropdownMenu | Commands with shortcuts, separators, labels and a danger item; on_select(key). | @silverpoint/react/ui/dropdown-menu | sp-dropdown-menu | sp_dropdown_menu |
| SpToast · SpToaster | Notices that stack in a corner and dismiss themselves; error and warning are announced assertively. | @silverpoint/react/ui/toast | sp-toast · sp-toaster | sp_toast · sp_toaster |