InlineHint

<caos-inline-hint>

explains what a field drives, worded for the surface it appears on

May be placed on a record page, a page inside an app and a step of a guided flow.

Inputs

A page sets nothing on this piece.

Events

This piece raises no events.

Slots

Name	What goes in it
the default slot	The guidance text. A sentence or two — it wraps, and the glyph stays with the first line.

Styling hooks

Design token	What it controls
--caos-color-text-muted	The guidance text.
--caos-color-accent	The info glyph — the one part of the hint that moves with a tenant’s brand.
--caos-font	The typeface the text is set in.
--caos-space-2	The gap between the glyph and the text.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(hint)	the hint row	Always
::part(icon)	the info glyph	Always

When to use it

Guidance about one field or setting that is worth permanent space: what it drives, what it affects further down, what the surface calls it. Reach for it when the alternative is a person guessing and finding out later.

What to use instead

• Tooltip — The note is worth having available but not worth permanent space — a definition, an aside, something the regular user already knows. A tooltip has to be asked for, which is the whole trade: it costs no room and it is missed by anyone who does not hover.
• BaseField — The note is a VALIDATION message rather than guidance. Every field draws its own message under itself and turns it red when invalid, and putting an error in a hint means it neither turns red nor clears when the problem is fixed.
• NoticeBanner — What needs saying is about the whole page or section rather than one field, or needs a decision. A hint is never a control and has nowhere to put one.
• KeyValueRow — The line is a VALUE to read rather than guidance about entering one.

Accessibility

The glyph is hidden from assistive tech, so the hint reads as exactly its text and nothing else — no announced icon name, no stray graphic. Left to the author, and this is the part not to skip: the hint is not attached to the field it explains, so a screen reader meets it after the field rather than as part of it. Where the association matters, give the hint an id and point the field’s aria-describedby at it from the page. The text itself also has to stand alone — “must be a positive number” read out with no idea which field it belongs to helps nobody.

Examples

Under a field

The ordinary case: one line saying what the field above it drives, worded for the surface it appears on rather than for the data model.

{
  "id": "example",
  "section": "Under a field",
  "columns": 1,
  "items": [
    {
      "id": "inline_hint_1",
      "type": "component",
      "key": "inline_hint",
      "children": [
        "Drives the due date shown on the order confirmation."
      ]
    }
  ]
}

<caos-inline-hint>Drives the due date shown on the order confirmation.</caos-inline-hint>

Longer guidance

What happens when the note runs to several lines — the glyph stays level with the first line instead of centring itself against the whole block, so the text keeps a straight left edge.

{
  "id": "example",
  "section": "Longer guidance",
  "columns": 1,
  "items": [
    {
      "id": "inline_hint_1",
      "type": "component",
      "key": "inline_hint",
      "children": [
        "Overriding this value pins it for every revision of the record, including ones created after today. The remaining figures are still recalculated around it, so the totals below will move when other inputs change."
      ]
    }
  ]
}

<caos-inline-hint>Overriding this value pins it for every revision of the record, including ones created after today. The remaining figures are still recalculated around it, so the totals below will move when other inputs change.</caos-inline-hint>