Field

A line to type in, inside a panel: a name, a value, a few words. It is 36 pixels high and shows where typing goes.

Use a field where a person types one line into a docked panel. A name that is already in a list is not typed in a field: it is edited in its row (Asking). The page's own search is a search field, which belongs to the header and has its own part. A field is a rounded box with a faint wash, so it can be found before it is used. For several lines there is TextArea; for a value from a list, Select.

Anatomy

Two fields at 1.6 times their size in a panel: one with text and the keyboard ring and a caret, one empty with its hint, with numbered callouts on the field, the words, the hint, the caret and the ring. — A field with text and one with its hint, at 1.6 times their size.

FieldA rounded box, 12 pixels in the corner, a wash of the main ink at 6 % on the panel.
WordsWhat was typed, in the main ink, 15 pixels, regular.
HintShown while the field is empty, in the meta ink. With persistentHint it stays, at the field's end, once there is text.
Caret1.5 pixels wide, in the accent (in the risk ink while the field is in error).
RingThe accent ring, 2 pixels, 2 pixels outside the field. A field always shows it while it has the keyboard: it is where typing goes.

States

The same field in four columns: empty at rest with its hint, under the pointer, with the keyboard and the word Lease, and filled at rest. — A field empty, under the pointer, being typed in, and filled.

Rest, emptyThe 6 % wash and the hint.
Pointer over itThe wash steps up by 5 points, in and out over 80 ms (see States). The pointer is an I-beam.
TypingThe ring and the caret. The wash does not step up while it has the keyboard.
FilledThe words in place of the hint.

Two more states are not in the strip. In error (error: true) the ring is always shown, with the caret, in the risk ink, and a screen reader hears that the entry is not valid. Disabled (enabled: false) draws the words and the hint in the faint ink, takes no pointer, no key and no stop for Tab, and a screen reader hears it as disabled.

Sizes

A field at one and a half times its size, 36 high, with 12 pixels of room before the text. — A field at 1.5 times its size.

Part	Value
Height	36 (`height.field`)
Width	320 unless you set it
Padding	12 each side (`space.m`)
Corner	12 (`radius.slab`)
Words	15 pixels (`row`), regular; the hint in the meta ink
Wash	6 % (`wash.action`); 11 % under the pointer
Caret	1.5 pixels, accent
Ring	2 pixels, 2 outside

Keys and pointer

A field edits text as any text input does. Two keys are the part's own.

Do this	To
`Tab`	Move into the field, and out
`Enter`	Send what was typed (`accepted`)
Click	Put the caret there; the ring shows

Accessibility

A screen reader finds the field as its text input, an editable text that carries the typed text and the name. The name is label, or the hint when there is no label. Set the label: the hint disappears as soon as someone types.
The hint is in the meta ink, which reaches about Lc 75 on a panel; the faint ink does not, and is for a disabled field.
The ring shows whenever the field has the keyboard, so the place of typing never depends on the caret.
An error is told by the ring and caret in the risk ink and in words to a screen reader. Say what is wrong in a line under the field as well.

Writing

Put a visible label above the field, in a word or two: "Name". Use the hint for an example or the form the entry takes, not for the label: "A name for the file". Leave it out when the label says enough.

Do and don't

A panel with the label Name above a field holding Lease agreement.pdf. — DoPut a visible label above the field.

A panel with two fields, Lease agreement.pdf and Downloads, and no labels. — Don'tLeave out the label, so the hint is the field's only name. Once someone types, the hint goes and nothing says what the field is for.

Code

import Tacit.Kit

Column {
    spacing: 8
    TacitText { text: "Name"; ink: "sec" }
    Field {
        id: name
        width: parent.width
        label: "Name"
        hint: "A name for the tag"
        text: tag.name
        onAccepted: tag.save(text)
    }
}

Property	What it does
`text`	What is typed
`hint`	Shown while empty
`persistentHint`	Keeps the hint, at the field's end, once there is text
`label`	What a screen reader says. Set it
`error`	The ring and caret in the risk ink
`enabled`	False: the faint ink, no keyboard, no pointer
`input`	The text input itself, for selection and keys
`accepted()`, `edited()`	`Enter` was pressed; the text was changed by typing
`focusIn()`	Gives the field the keyboard

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.