molecule · stable · extension · since 2026-09
CommentField
Purpose
The auditor’s note on the element judged: a small textarea with its label, in every wizard.
When to use, when not
Use it for the note that travels with an answer. Not for a form of the app, which is Field with multiline.
Anatomy
- The label, with “(facultatif)” when it is.
- The hint line, optional.
- The textarea, which grows with the text.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
id | string | ||
label | string | The label: "Commentaire sur ce cadre". | |
value? | string | undefined | The text; bindable, absent reads as empty. No fallback: a page binding a note not written yet binds undefined, which Svelte refuses on a prop that has one. | |
placeholder? | string | 'Ce que vous avez constaté…' | |
optional? | boolean | true | Whether the field is optional, said in the label. |
hint? | string | undefined | A line under the label: the keys, what the note is for. | |
rows? | number | 2 | |
class? | string | '' | Layout classes only. |
States
Empty, filled, and with a hint about the keys.
empty
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
filled
A note already written, as when the auditor comes back to an element.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
withHint
The hint says the keys before the auditor types.
Light
Ctrl ou ⌘ avec Entrée passe à l'élément suivant.
Dark
Ctrl ou ⌘ avec Entrée passe à l'élément suivant.
320 px, light
Ctrl ou ⌘ avec Entrée passe à l'élément suivant.
320 px, dark
Ctrl ou ⌘ avec Entrée passe à l'élément suivant.
216 px, light
Forced colours, captured
Accessibility contract
- Role and name: a
textareanamed by itslabel, described by the hint when there is one. - Keyboard, focus: an ordinary text field. The wizard’s shortcut listener leaves letters alone inside it and takes Enter to advance, Shift and Enter to break the line; the hint says so.
- Live regions: none.
Content rules
French. The label names the element judged (“Commentaire sur ce cadre”); the placeholder is “Ce que vous avez constaté…“.
Do and don’t
- Do give each field an id of its own: the old shared id let a shortcut read the wrong field.
- Do not make the note required: a conforming element needs no note.
Examples
<CommentField id="comment-2-2" label="Commentaire sur ce cadre" bind:value={note} hint="Ctrl ou ⌘ avec Entrée passe à l'élément suivant." />Surfaces
- Extension: every wizard.
Related
Field, AnswerButtons, WizardFooter.
Decisions
- 2026-09-26: optional by default and said so in the label, since a conforming element needs no note and a required field would slow every answer.
Criteria held by construction
- 11.1, Chaque champ de formulaire a-t-il une étiquette ?
The textarea has a visible label tied by for and id, given by the page so two fields never share one. - 11.2, Chaque étiquette associée à un champ de formulaire est-elle pertinente ?
The label says what the note is about, the element judged, and says when it is optional. - 11.10, Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?
The hint under the label says the keys before the auditor types: Enter advances, Shift and Enter breaks the line.
Tokens it reads
- Colour:
--rl-ink,--rl-ink-soft,--rl-line-control,--rl-surface - Typography:
--rl-weight-bold,--rl-weight-regular,--rl-text-sm,--rl-text-xs - Spacing:
--rl-space-1,--rl-space-2 - Layout:
--rl-radius,--rl-border