Fieldset
A <fieldset> with a legend and a line about it, its fields stacked, in a row or in a grid; disabled as one.
Demo
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/fieldset.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/fieldset.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/fieldset.qwe
view FieldsetDemo() = <form.demo-stack method="post" action="#fieldset"> <Fieldset id="fieldset-demo-name" legend="Your name" description="As it should appear on the invoice." layout="grid" required={true}> <TextField name="first" label="First name" autocomplete="given-name"/> <TextField name="last" label="Last name" autocomplete="family-name"/> </Fieldset> <Fieldset id="fieldset-demo-notify" legend="Notify me by" layout="inline"> <Checkbox name="by_email" label="Email" checked={true}/> <Checkbox name="by_sms" label="Text message"/> <Checkbox name="by_push" label="Push"/> </Fieldset> <Fieldset id="fieldset-demo-card" legend="Card on file" description="Locked while the plan is paid by invoice." bordered={true} disabled={true}> <TextField name="card" label="Card number" value="•••• •••• •••• 4242"/> <TextField name="expiry" label="Expires" value="08 / 28" size="sm"/> </Fieldset> </form>Source
ui/fieldset.qwe
// Fieldset: a group of fields under one name, with a line about them, laid out in// a column, a row or a grid. It is the browser's own <fieldset> with a <legend>,// so screen readers say the group's name with each field, and disabled={true}// disables every field in it at once.//// <Fieldset legend="Shipping address" description="Where the order goes.">// <TextField name="street" label="Street"/>// <TextField name="city" label="City"/>// </Fieldset>// <Fieldset legend="Name" layout="grid" columns={2}> <TextField name="first" .../> <TextField name="last" .../> </Fieldset>// <Fieldset legend="Notify me by" layout="inline"> <Checkbox .../> <Checkbox .../> </Fieldset>//// legend: the group's name. description: a line under it, which screen readers read// with the group. children: the fields.// layout: "stacked" (one under another, the default), "inline" (side by side, wrapping)// or "grid" (columns, 2 by default; one on a phone). gap: pixels between the fields (14).// disabled: every field in it is disabled. bordered: a box around it (false).// required: a mark after the legend. id: the <fieldset>'s id.import ui/theme.qwe use ui_clslet fieldset_css = css`.ui-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; color: var(--ui-fg); font: 14px/1.4 var(--ui-font); }.ui-fieldset-box { padding: 16px 18px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }.ui-fieldset-legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }.ui-fieldset-box > .ui-fieldset-legend { float: none; width: auto; padding: 0 6px; margin-left: -6px; }.ui-fieldset-req { margin-left: 2px; color: var(--ui-danger); }.ui-fieldset-desc { clear: both; margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; }.ui-fieldset-fields { clear: both; display: grid; gap: var(--ui-fieldset-gap, 14px); padding-top: 14px; }.ui-fieldset-box > .ui-fieldset-fields { padding-top: 10px; }.ui-fieldset-box > .ui-fieldset-desc + .ui-fieldset-fields { padding-top: 14px; }.ui-fieldset-inline .ui-fieldset-fields { display: flex; flex-wrap: wrap; align-items: flex-start; }.ui-fieldset-grid { container-type: inline-size; }.ui-fieldset-grid .ui-fieldset-fields { grid-template-columns: repeat(var(--ui-fieldset-cols, 2), minmax(0, 1fr)); }@container (max-width: 480px) { .ui-fieldset-grid .ui-fieldset-fields { grid-template-columns: minmax(0, 1fr); } }.ui-fieldset:disabled { color: var(--ui-muted); }`view Fieldset(legend: str, description: str? = null, layout: str = "stacked", columns: int = 2, gap: int = 14, disabled: bool = false, bordered: bool = false, required: bool = false, id: str? = null, class: str? = null, children) { style global fieldset_css let did = description != null && id != null ? `${id}-desc` : null <fieldset class={ui_cls(["ui-fieldset", bordered && "ui-fieldset-box", layout != "stacked" && `ui-fieldset-${layout}`, class])} id={id} disabled={disabled} aria-describedby={did} style={`--ui-fieldset-gap: ${gap}px; --ui-fieldset-cols: ${columns}`}> <legend.ui-fieldset-legend> {legend}{required && <span.ui-fieldset-req aria-hidden="true">*</span>} </legend> {description != null && <p.ui-fieldset-desc id={did}>{description}</p>} <div.ui-fieldset-fields>{children}</div> </fieldset>}Related
ActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.13 views · 6 downloadsCollapsibleA block shown and hidden under a line you click, on the browser's own <details>; open by default or not.7 views · 6 downloadsScrollAreaA box with its own scrollbars and a height limit, fading at the edges where there is more to see.6 views · 7 downloadsFormFieldA label, a hint and an error around any control, with a required mark, the label beside or above it.5 views · 5 downloadsAppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.10 views · 7 downloadsAspectRatioKeeps what it holds at a shape (16/9, 4/3, 1): an image or a video fills a box of the right height.9 views · 7 downloads
Thread
Thread 0 posts
On Fieldset: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.