Skip to main content
SanchikaEvidence contracts
Primary navigation
Search Source

Primitive contract

Field

Groups visible form guidance and preserves the v0.0.2 class/state contract without implementing validation or input behavior.

Accessible label, control, hint, and error wrapper · @sanchika/primitives

Purpose and semantics

Groups visible form guidance and preserves the v0.0.2 class/state contract without implementing validation or input behavior.

Recommended semantic: Use a neutral wrapper or fieldset where grouping semantics apply; labels and controls remain native elements.

Anatomy

label

Visible label associated to the control.

control

Native input, textarea, or select.

hint

Optional instructions.

error

Visible associated error copy.

Finite variants and important states

Variant · tone
neutral, danger
Variant · size
sm, md, lg
Required states
default, focus-visible, disabled, error
Class hooks
.sk-field · [data-sk-label] · [data-sk-control] · [data-sk-hint] · [data-sk-error]

Composed synthetic exemplar

Rendered state matrix

Field: 4 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

Source period is required.

focus visibleKeyboard focus remains explicit and independent of motion.

Source period is required.

disabledUnavailable with its reason preserved in nearby text.

Source period is required.

errorThe failure and recovery path remain visible together.

Source period is required.

Accessibility and consumer responsibility

Keyboard and screen reader
  • Keep native control keyboard behavior
  • Do not trap focus
  • Associate label, hint, and error
  • Expose aria-invalid on the control
Consumer owns
  • Implement validation
  • Associate visible labels and descriptions
  • Keep native control semantics
Mobile
  • Controls fill available inline size
  • Labels and error text wrap
Reduced motion and forced colors

No layout or content motion is required.

  • Control boundary and focus remain visible with system colors.

Compact API reference

Package
@sanchika/primitives
CSS
@sanchika/primitives/styles.css
Contract
primitiveSpecs.find((contract) => contract.name === "Field")
Primary class
.sk-field