Components · Susegad UI

Badge

A word or two of status. The text is the meaning, a distinct shape per tone backs it up, colour comes last. Quiet is…

Chat thread

A conversation as a list of messages a screen reader can read, instead of a screenshot. Phone numbers, emails and names…

Checkbox

A native checkbox that submits, validates and takes Space with or without JavaScript. Quiet is a hairline box with a…

Combobox

An input with suggestions. Without JavaScript it is the browser's own input list and datalist; with it, the ARIA APG…

Connecting (FireflySync)

A connection's state in words, read out as it changes. Quiet shows a static dot; warm and playful show fireflies that…

Date range

Arrival and departure over two native date inputs that submit without JavaScript. With it, a two-month calendar that…

Depth photo

<sg-depth-photo>: a photograph (or a drawing) with a depth map, seen through a camera. The <img> inside is the picture…

Diagram

A diagram from a few lines of text (Guest -> Portal: books): boxes, arrows, flows with things moving along them,…

Empty state

What a place shows before there is anything in it: your heading, sentence and action, named as a region. Quiet adds a…

Field (TextField, TextArea)

A label over a ruled line, for a line of text or a longer message, wrapping a native input or textarea that types,…

Field note

The note under a form field that says what is wrong and how to fix it. Follows constraint validation with its own…

File drop

A native file input you can also drop files onto. Without JavaScript it is the browser's own input; with it, the real…

Form

A native form the browser validates, which says what happens when you send it. Adds a field note to every field,…

Loader

A polite status region that says in words what is loading, with a small drawing beside it: three pulsing dots in quiet,…

Now note

A short, dated note of what someone is up to right now, with the availability as a badge in words. It adds how long ago…

One-time code

A one-time code entry. The native path is one input with autocomplete="one-time-code" and the number pad, which…

Player

The Susegad player: enhances a native video or audio element with a drawn scrubber, captions in our type, a poster that…

Postcard

A card for a piece of work: title, where and when with a status badge beside them, the problem in a line, what was…

Progress

Enhances a native progress element. Quiet is the native bar as a pencil hairline; warm is a small kolam drawn exactly…

Quote

A pull-quote or testimonial in a native figure: the words, who said them, their role and business, and an optional link…

Radio group

A real fieldset of native radios: arrow keys, one choice per name, required and submitting all stay the browser's, with…

Reach

A contact block in an address: email and WhatsApp as real links (built by waLink and mailtoLink), a copy-the-number…

Select

The browser's own select, kept native: its keyboard, its screen-reader role and its place in the form are untouched.…

Signature

Sign by hand or by typing your name. The native path is a typed-name input that submits and works without JavaScript;…

Site nav

A site header that works with no JavaScript: the page links sit in a native details, a Menu button on narrow screens…

Skeleton

A placeholder for a region whose content is on its way. The region is aria-busy and says what is loading, then…

Sound switch

The one control that turns Susegad's sound switch on or off, site-wide, over a native checkbox with role=switch.…

Stamp

A mark that something real has happened: held, received, paid. The words are text in a role="status" region, announced…

Stepper

A long form walked one step at a time. Without JavaScript every step is a visible fieldset with one submit. With it,…

Toast

Short messages that never take focus. A region holds two live regions (polite, and alert for errors) and a pile of…

Toggle

A native switch (a checkbox with role="switch") that submits and takes Space with or without JavaScript. Quiet is a…

Veranda stage

<sg-veranda-stage>: the drawn veranda staged in 3D through <sg-depth-photo>, with the page's words on a frosted pane…

Voice note

A voice message the way a phone shows it: a play button, a waveform you can seek along, the length, and the transcript…