id: field
label: Field
family: family-c-forms
category: Form
intent: Wrap a form input with label and error
description: Form field wrapper with label and error
composable: false
capabilities:
required_parts: []
optional_parts: []
tags: ["field", "label", "error", "form", "wrapper"]
keywords:
pain: Form fields lose validation and accessibility linkage between label and input
promise: Validation, label and error state unified in a single contract
why: |
FieldPrimitive encodes validation and disabled state into data attributes. FieldLabel and FieldError ensure correct ARIA mapping. This guarantees consistent field behavior and accessibility.
rules: ["CR-001", "CR-004"]
use_cases: ["forms", "input validation"]
related: ["form", "input", "input_group", "input_otp", "textarea", "label", "checkbox", "form_error_summary"]
file: field_ui.css
tokens: field-*, space-*, font-*
foundation: spacing, typography
states: ["focus", "disabled", "error"]
island: field_boundary.rs
pillar: form
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift"]
before: |
// ❌ Typical
view! {
<label>"Email"</label>
<input />
}
after: |
// ✅ CanonRS
view! {
<Field>
<FieldLabel>"Email"</FieldLabel>
</Field>
}
boundary_type: init
block: [form_field_block]
blocks_primitives: [stack]