Controls

Anatomy

.preceda-button

Primary (the 0.1 default): binding fill, action ink, Inter 14, 40px tall.

--secondary

Rule-strong border, ink text, transparent; paper-hover under the hand.

--quiet

Binding-ink text only; binding tint on hover. The least weight an act can have.

--ink

The letter act: ink fill, paper text, set in the serif. Lamp inverts it by itself.

--destructive

Binding rule and binding-ink verb; fills with binding only on hover. The word says what is lost.

--icon

Square, icon only; an aria-label is required (IconButton enforces it).

--sm

32px drawn, 40px hit area (44px on touch) via an invisible extension.

__working

The working point: a small square in the text colour, pulsing unless motion is reduced.

.preceda-button-group

Related acts on one line (role="group"). --attached shares rules; --end aligns right.

Variants

State matrix

At 390 px

On a coarse pointer every button grows to 44px. In a sheet or on the register, the one act runs full width at the foot; a second act sits above it as secondary.

Accessibility

• Native <button type="button"> by default; asChild renders a router link with the same face when the act navigates.
• Loading sets aria-busy and aria-disabled (not disabled), so focus and the accessible name stay while the label reads “Sending…”.
• IconButton requires label; the glyph is aria-hidden. Never rely on title= for a name.
• Disabled is flat paper-sunken with tertiary ink and no hover; explain why nearby, or prefer an error on submit.
• Targets: 40px (32px drawn + extension for sm); 44px under pointer: coarse.

Usage

<button class="preceda-button" type="button">Prepare the matter</button>
<button class="preceda-button preceda-button--secondary" type="button">Open the FIR</button>
<button class="preceda-button preceda-button--ink" type="button">Send</button>
<button class="preceda-button preceda-button--ink" type="button" aria-busy="true" aria-disabled="true">
  <span class="preceda-button__working" aria-hidden="true"></span>Sending…
</button>
<button class="preceda-button preceda-button--quiet preceda-button--icon" type="button" aria-label="More actions">
  <svg class="preceda-icon preceda-icon--20" aria-hidden="true"><use href="/icons.svg#preceda-icon-more"/></svg>
</button>
<div class="preceda-button-group" role="group" aria-label="Filing">…</div>

import { Button, ButtonGroup, IconButton } from '@luvkapur/preceda-design-system/react';

<Button variant="ink" loading={sending} loadingLabel="Sending…" data-matter-send onClick={send}>Send</Button>
<IconButton icon="more" label="More actions on this matter" />
<Button asChild variant="secondary"><RouterLink to="/matters">Back to matters</RouterLink></Button>
<ButtonGroup aria-label="Filing">
  <Button variant="secondary">Return to associate</Button>
  <Button>Approve for filing</Button>
</ButtonGroup>

Anatomy

.preceda-field-group

The stack: label, control, then the foot (error before hint).

.preceda-field-label

Small-caps label role in secondary ink; __optional adds “· optional” in tertiary.

.preceda-field

The 0.1 control: rule-strong border on paper-raised, Inter 14, 40px. Hover darkens the rule; focus draws the opaque ring.

--code

One-time codes and identifiers: mono, tabular, tracked, centred.

--ruled

Only a bottom rule, in the serif: an answer written inside a letter or fact request.

.preceda-field-hint / .preceda-field-error

Small role; the error is binding ink with a leading dash and is referenced by aria-describedby.

Variants

State matrix

At 390 px

Full width, 44px tall on touch, and set at 17px under a coarse pointer so iOS does not zoom into the field. Use the right type, inputMode and autoComplete so the phone offers the right keyboard and the code from Messages.

Accessibility

• A visible <label for> is always present; placeholder text is an example, never the label.
• The error sets aria-invalid and is listed first in aria-describedby, then the hint.
• Placeholder ink is tertiary (passes 4.5:1); disabled values stay in tertiary ink, legible but inert.
• Focus ring is the shared opaque binding outline, offset 2px.

Usage

<div class="preceda-field-group">
  <label class="preceda-field-label" for="email">Email address</label>
  <input class="preceda-field" id="email" type="email" aria-invalid="true" aria-describedby="email-error">
  <div class="preceda-field-group__foot">
    <p class="preceda-field-error" id="email-error">Enter the whole address, e.g. rhea@mehrachambers.in.</p>
  </div>
</div>

import { TextField } from '@luvkapur/preceda-design-system/react';

<TextField label="Email address" type="email" autoComplete="email" value={email} onChange={…} error={error} />
<TextField label="Six-digit code" variant="code" inputMode="numeric" autoComplete="one-time-code" maxLength={6} />

Anatomy

.preceda-field--textarea

Serif body (15/1.55); rows sets the resting height, no resize grip.

TextArea autoGrow

React fallback: measures scrollHeight on every change, capped at maxRows lines, then overflow scrolls.

onSubmitShortcut

The composer pattern: Enter submits a non-blank value, Shift+Enter inserts a newline, IME composition is respected.

.preceda-field-counter

Optional “n / max” under the field when showCount and maxLength are set.

--resizable

autoGrow={false}: fixed height with a vertical grip, for long notes outside the composer.

Variants

State matrix

At 390 px

In the dock the composer is one line that grows to four before it scrolls, so the desk stays in view. Under a coarse pointer the serif rises to the 17px reading size so iOS does not zoom into the field.

Accessibility

• Label it: a visible label, or aria-label (“Instruct the associate”) where the placeholder carries the prompt.
• Explain the Enter/Shift+Enter shortcut in the hint; it is announced with the field.
• The counter is referenced by aria-describedby but not live, so it is not read on every keystroke.

Usage

<textarea class="preceda-field preceda-field--textarea" rows="2"
  aria-label="Instruct the associate" placeholder="Ask a question or instruct the associate…"></textarea>

import { TextArea } from '@luvkapur/preceda-design-system/react';

<TextArea
  ref={composerRef}
  aria-label="Instruct the associate"
  placeholder="Ask a question or instruct the associate…"
  rows={1}
  maxRows={8}
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onSubmitShortcut={() => canSend && send()}
  disabled={sending}
/>

Anatomy

.preceda-search

The line: search glyph at the start, the field, and the end slot.

.preceda-search__shortcut

A <kbd> hint (“/”) shown while the field is empty; hidden from assistive technology (the shortcut is documented in the shortcuts sheet).

Clear act

IconButton “Clear search” replaces the shortcut once there is text; Escape also clears.

.preceda-search__status

role="status": “Searching…” with the working point, the count, or the failure. Reserve it with status="" to keep the layout still.

--lg

The front-desk console: 48px, the reading serif at 17px.

Variants

State matrix

At 390 px

Full width; the shortcut hint is dropped on touch (there is no “/” key to reach). The status line holds its height so results do not jump as it changes.

Accessibility

• type="search" gives the searchbox role and the platform clear-on-Escape; the native cancel glyph is hidden in favour of the labelled cross.
• Status changes are polite live announcements (“412 judgments”), never alerts.
• The shortcut is a hint only; the page must register the key and must not steal it while another field has focus.

Usage

<div class="preceda-search">
  <svg class="preceda-icon preceda-search__glyph" aria-hidden="true"><use href="/icons.svg#preceda-icon-search"/></svg>
  <input class="preceda-field" type="search" aria-label="Search" aria-describedby="s-status">
  <span class="preceda-search__end"><kbd class="preceda-search__shortcut" aria-hidden="true">/</kbd></span>
</div>
<p class="preceda-search__status" id="s-status" role="status">412 judgments</p>

import { SearchField } from '@luvkapur/preceda-design-system/react';

<SearchField
  ref={searchRef}
  aria-label="Search cases, citations or legal topics"
  shortcut="/"
  size="lg"
  value={query}
  onChange={(e) => updateQuery(e.target.value)}
  onClear={() => updateQuery('')}
  loading={searching}
  status={searching ? 'Searching…' : resultLine}
/>

Anatomy

.preceda-select

Wrapper that positions the chevron; takes the quiet modifier.

.preceda-select__control

The <select> with appearance: none: the field face, 40px, Inter 14, room for the chevron.

.preceda-select__chevron

chevron-down icon in secondary ink; pointer-events: none.

--quiet

A bare word and chevron for running chrome: “Sort: Relevance”, “Desk ▾”.

Variants

State matrix

At 390 px

The phone opens its own picker; nothing to build. The control grows to 44px and 17px text so iOS does not zoom.

Accessibility

• Always native: no custom listbox for a closed set of choices. Use Combobox only when the set is searched.
• Label with a visible <label> or aria-label; the error sets aria-invalid and aria-describedby.
• Disabled options stay listed so counsel can see what exists but does not apply.

Usage

<div class="preceda-select">
  <select class="preceda-select__control" id="forum">…</select>
  <svg class="preceda-icon preceda-icon--16 preceda-select__chevron" aria-hidden="true"><use href="/icons.svg#preceda-icon-chevron-down"/></svg>
</div>

import { Select } from '@luvkapur/preceda-design-system/react';

<Select label="Forum" options={courts} value={forum} onChange={(e) => setForum(e.target.value)} />
<Select aria-label="Sort judgments" variant="quiet" options={sort} />

Anatomy

.preceda-choice

The <label>: a two-column grid (mark, words), at least 40px tall, 44px on touch.

.preceda-choice__input

The native input, appearance: none: a 16px box (radius small) or ring in secondary ink on paper-raised.

:checked

Binding fill with an action-ink tick (checkbox) or dot (radio).

:indeterminate

A dash for “some of these”; React sets the property and aria-checked="mixed".

.preceda-choice__hint

One line under the label in the small role, tied by aria-describedby.

.preceda-choice-group

A fieldset with a small-caps legend; --inline sets the choices on one line.

Variants

State matrix

At 390 px

On touch the box grows to 20px and the row to 44px; the whole label stays the target. Stack choices; do not set them inline below 390px.

Accessibility

• Native inputs: Space toggles, arrows move within a radio group, the form submits them.
• The label wraps the input, so the words are the name and the hit area.
• Checked is shown by a tick or dot on a filled box, so it reads without colour; indeterminate is a dash and aria-checked="mixed".
• A group’s error is on the fieldset (aria-describedby + aria-invalid) and each invalid input carries a binding border.

Usage

<label class="preceda-choice">
  <input class="preceda-choice__input" type="checkbox" name="notice">
  <span class="preceda-choice__label">Notice under s. 35(3) BNSS served</span>
</label>

import { Checkbox, ChoiceGroup, Radio } from '@luvkapur/preceda-design-system/react';

<ChoiceGroup legend="Forum" inline>
  <Radio name="forum" value="sessions" label="Sessions Court" />
  <Radio name="forum" value="hc" label="High Court" />
</ChoiceGroup>
<Checkbox label="All authorities verified" indeterminate={some && !all} checked={all} />

Anatomy

.preceda-switch

A <button role="switch" aria-checked>; the label (and hint) are its name.

__track / __thumb

32 × 16 ruled track with a square thumb. On: binding fill, action-ink thumb moved to the end.

__state

“On” / “Off” in the small role after the track (aria-hidden; the role carries the state).

--row

A settings line: the label takes the measure, the track sits at the end over a hairline.

Variants

State matrix

At 390 px

Rows run full width with the track at the end, 44px tall on touch. Keep one setting per row.

Accessibility

• WAI-ARIA switch: role="switch" with aria-checked; Space and Enter toggle (it is a button).
• The visible label is the accessible name; the “On/Off” word is decorative duplication for sighted readers.
• The track moves the thumb and changes its fill, so the state reads without colour.

Usage

<button class="preceda-switch preceda-switch--row" type="button" role="switch" aria-checked="false">
  <span class="preceda-switch__text"><span class="preceda-switch__label">Lamp after 7 pm</span></span>
  <span class="preceda-switch__track" aria-hidden="true"><span class="preceda-switch__thumb"></span></span>
  <span class="preceda-switch__state" aria-hidden="true">Off</span>
</button>

import { Switch } from '@luvkapur/preceda-design-system/react';

<Switch label="Lamp after 7 pm" checked={auto} onCheckedChange={setAuto} className="preceda-switch--row" />

Anatomy

input[role="combobox"]

The field (the .preceda-field face) with aria-autocomplete="list", aria-expanded, aria-controls and aria-activedescendant.

.preceda-combobox__indicator

Chevron (turned while open), or the working point while suggestions load.

.preceda-combobox__listbox

role="listbox" on paper-raised with the sheet shadow, 240px before it scrolls; layer: popover.

.preceda-combobox__option

role="option": the label in Inter, one meta line in tertiary; aria-selected (active) draws the wash and a binding start rule; the value already set carries a tick.

.preceda-combobox__message

“Searching…” or “No matches found”, inside the list.

.preceda-combobox__live

A polite status: “4 suggestions. Use the arrow keys to choose.”

Variants

State matrix

At 390 px

The list stays anchored under the field and scrolls inside itself (overscroll contained) so the page does not move under the thumb. Each suggestion is 44px on touch. Inside a bottom sheet, keep the field above the keyboard.

Accessibility

• WAI-ARIA 1.2 combobox, list autocomplete without automatic selection: DOM focus stays in the input; aria-activedescendant names the active option.
• ArrowDown opens and moves to the first suggestion (Alt+ArrowDown opens only); ArrowUp opens at the last; Enter sets the active suggestion; Escape closes, and a second Escape clears; Tab closes and leaves.
• Pointer: mousedown on an option is prevented so the field keeps focus; hovering moves the active option.
• Counts and “No matches found” are announced politely; the tick on the current value has the text “current”.

Usage

<div class="preceda-field-group">
  <label class="preceda-field-label" for="judge">Judge</label>
  <div class="preceda-combobox" data-open="true">
    <div class="preceda-combobox__anchor">
      <input class="preceda-field" id="judge" role="combobox" aria-autocomplete="list"
        aria-expanded="true" aria-controls="judge-list" aria-activedescendant="judge-o1">
      <span class="preceda-combobox__indicator" aria-hidden="true">…</span>
    </div>
    <ul class="preceda-combobox__listbox" id="judge-list" role="listbox">
      <li class="preceda-combobox__option" id="judge-o1" role="option" aria-selected="true">
        <span class="preceda-combobox__option-label">Meera S. Iyer</span>
        <span class="preceda-combobox__option-meta">Delhi High Court · 2,311 judgments</span>
      </li>
    </ul>
  </div>
</div>

import { Combobox } from '@luvkapur/preceda-design-system/react';

<Combobox
  label="Judge"
  options={suggestions}          // [{ value, label, meta }]
  inputValue={draft}
  onInputValueChange={(v) => { setDraft(v); fetchSuggestions(v); }}
  onSelect={(o) => save(o.label)}
  loading={loading}
  minChars={2}
/>

Anatomy

.preceda-file-attach

The act (“Attach”, an underlined text button) and its hint (“FIR, orders, correspondence · PDF, DOCX”) in the small role; a hidden file input.

.preceda-attached

The line: “Attached:” then each file between middots.

__name

The file name in ink (a button when the finished file can be opened on the desk); truncates past 192px with the full name as a tooltip.

__detail / __working / __error

Size or length; the working point with “uploading”; the reason in binding ink, announced as an alert.

__remove

A small labelled cross (“Remove FIR.pdf”); disabled while a removal or turn is in flight.

.preceda-dropzone

Wraps the composer. While a file is held over it: a dashed binding rule and “Drop to attach to this matter”.

--panel

A standing drop place for matter creation: dashed rule-strong, a serif line and the Attach act.

Variants

State matrix

At 390 px

There is no drag on a phone: the Attach act opens the system picker (Files, Photos, Camera). The attached line wraps under the composer; names truncate before the cross so the remove target never moves off the line.

Accessibility

• The act is a real <button>; the hidden input has its own name (“Attach files”). Dropping is never the only way in.
• Upload state is in words (“uploading”, the reason for a failure); failures are role="alert", progress is role="status".
• Each remove act is named for its file. After a removal the product returns focus to the Attach act.
• The drop overlay is aria-hidden: it repeats what the act already says.

Usage

<ul class="preceda-attached" aria-label="Attached files">
  <li class="preceda-attached__label" aria-hidden="true">Attached</li>
  <li class="preceda-attached__item" data-status="done">
    <button class="preceda-attached__name" type="button">FIR.pdf</button>
    <span class="preceda-attached__detail">412 KB</span>
    <button class="preceda-button preceda-button--quiet preceda-button--sm preceda-button--icon preceda-attached__remove" aria-label="Remove FIR.pdf">…</button>
  </li>
</ul>
<span class="preceda-file-attach">
  <input type="file" hidden multiple accept=".pdf,.docx,.txt" aria-label="Attach files">
  <button class="preceda-file-attach__trigger" type="button">Attach</button>
  <span class="preceda-file-attach__hint">FIR, orders, correspondence · PDF, DOCX</span>
</span>

import { AttachedList, Dropzone, FileAttach } from '@luvkapur/preceda-design-system/react';

<Dropzone onFiles={handleFiles} disabled={sending}>
  <TextArea … />
  <AttachedList
    files={pending.map((f) => ({ id: f.localId, name: f.filename, status: f.status, detail: formatSize(f.sizeBytes), error: f.error }))}
    onOpen={(f) => view(f.id)}
    onRemove={(f) => remove(f.id)}
    removeDisabled={removing}
  />
  <FileAttach onFiles={handleFiles} accept={MATTER_UPLOAD_ACCEPT} hint="FIR, orders, correspondence · PDF, DOCX" disabled={sending} />
</Dropzone>

Anatomy

.preceda-inline-edit

Label | value grid (label column 120px), like a ledger row.

__label

Small-caps label role in secondary ink.

__value

A <button> showing the value in the serif (or the placeholder in tertiary italic); hover and focus draw a bottom rule and the edit glyph.

__input

The editing field: a bottom rule in ink, same serif and size, so nothing jumps.

__meta

One line of context from the record under the value (the judge’s bench, a counsel’s practice).

__status

“Saving…” with the working point, or the reason it failed in binding ink.

--title / --stacked

A heading renamed in place (matter title, draft name); label above value for narrow columns.

Variants

State matrix

At 390 px

Below 390px use stacked (label above value). On touch the pen is always shown, because there is no hover to reveal it, and the field is set at 17px so iOS does not zoom.

Accessibility

• At rest the value is a button named “Judge Additional Sessions Judge-03, South, edit”; activating it moves focus into the field with the text selected.
• Enter saves, Escape restores the recorded value; leaving the field saves. Focus returns to the value afterwards.
• Saving sets aria-busy on the field; a failure keeps the editor open, sets aria-invalid and is announced as status.
• For suggestions, pass renderEditor and spread its inputProps onto a Combobox so the keys and name survive.

Usage

<div class="preceda-inline-edit">
  <span class="preceda-inline-edit__label" id="j-label">Judge</span>
  <div class="preceda-inline-edit__body">
    <button class="preceda-inline-edit__value" type="button" aria-labelledby="j-label j-value" id="j-value">
      <span class="preceda-inline-edit__text">Additional Sessions Judge-03, South</span>
      <svg class="preceda-icon preceda-icon--16 preceda-inline-edit__glyph" aria-hidden="true">…</svg>
    </button>
    <p class="preceda-inline-edit__meta">Court of Sessions, Saket · 318 orders</p>
  </div>
</div>

import { Combobox, InlineEdit } from '@luvkapur/preceda-design-system/react';

<InlineEdit label="Judge" value={judge} onSave={saveJudge} meta={stats?.line1} metaLoading={loadingStats}
  renderEditor={({ inputProps, onChange, commit }) => (
    <Combobox {...inputProps} options={suggestions} inputValue={String(inputProps.value)}
      onInputValueChange={onChange} onSelect={(o) => { onChange(o.label); commit(); }} />
  )}
/>

Anatomy

.preceda-segmented

role="radiogroup" with an accessible name; __label shows it before the options.

__option

role="radio" buttons; one tab stop (the checked one). Middots between options are drawn, not text.

[data-line-start]

Set by the component on the first option of each wrapped line; its middot is dropped, so no line opens with one.

__text

The word; aria-checked="true" puts it in ink over a 1px binding rule.

--ui

The same in small Inter, for the masthead account line and toolbars.

--ruled

Boxed segments for dense tool rows; the chosen segment is set in ink with paper text.

Variants

State matrix

At 390 px

Options grow to 44px targets with a wider gap. Keep to two or three short words; past that, use a Select.

Accessibility

• WAI-ARIA radio group: Tab reaches the checked option; arrows move and select; Home and End jump.
• The chosen option is said by aria-checked and drawn with a rule under it as well as ink, so it does not rest on colour.
• Name the group (“Lighting”); show the name with showLabel when context does not make it obvious.

Usage

<div class="preceda-segmented" role="radiogroup" aria-label="Lighting">
  <button class="preceda-segmented__option" type="button" role="radio" aria-checked="true"><span class="preceda-segmented__text">Paper</span></button>
  <button class="preceda-segmented__option" type="button" role="radio" aria-checked="false" tabindex="-1"><span class="preceda-segmented__text">Lamp</span></button>
</div>

import { Segmented } from '@luvkapur/preceda-design-system/react';

const { theme, setTheme } = useTheme();
<Segmented label="Lighting" options={[{ value: 'paper', label: 'Paper' }, { value: 'lamp', label: 'Lamp' }]}
  value={theme} onValueChange={setTheme} variant="ui" />