C&C Docs
Log in

cnc-field

The furniture around a control: label, required marker, help text, error, and the wiring that ties them together for a screen reader. It wraps a control you supply rather than being one, so it works over a native <input>, a cnc-select, or anything else — and it can repeat that control into a list of values.

Quick start

Put the control in the default slot. The field listens for input and change from anything inside it, adopts the value, and re-emits a normalized event of its own — so $value on the field works whatever the control is.

We only use this to send receipts.

 (empty) 
<cnc-field
  label="Email address"
  name="email"
  required
  help-text="We only use this to send receipts."
  $value="email"
>
  <cnc-input type="email" placeholder="you@example.com"></cnc-input>
</cnc-field>

Usage guidance

Wrap every control that needs a label. The accessible wiring — aria-labelledby, aria-describedby, aria-invalid, the error's role="alert" — is the reason to use it rather than a <label> and a paragraph, and it is all lost if you hand-roll the same layout.

cnc-input already carries its own label, help-text and error for the common case; reach for cnc-field when the control is something else, when you need the action slot, or when the value repeats. Validation is always the page's: this widget renders the message you give it and enforces nothing.

← Back to Widgets