Components | WebCraft

Interactive primitive
Button
A native action control with complete busy, disabled, focus, and hover states.
Activated 0 times
Preview preset
Use when
Use for a clear, immediate action such as saving a form or confirming a choice.
Avoid when
Do not use it for navigation; use a link when the destination is the primary outcome.
Accessibility
Loading exposes aria-busy and disables repeat activation; disabled uses the native attribute.
Interactive primitive
Form Field
A labelled input that makes entered, error, disabled, and focus states explicit.
Project name
Use a short, recognisable project label.
Preview preset
Use when
Use for one clear piece of information with a visible label and nearby validation feedback.
Avoid when
Do not replace the label with a placeholder or put an error message far from its field.
Accessibility
The label is associated with the input; errors use aria-invalid and aria-describedby.
Interactive primitive
Switch
A labelled binary control with an explicit state, native keyboard operation, and a visible focus ring.
Compact layout
Compact layout is off.
Preview preset
Use when
Use for an immediate on/off preference whose current state can be understood at a glance.
Avoid when
Do not use it for actions that need a separate confirmation or a multi-step choice.
Accessibility
A native checkbox with switch semantics supports Space and exposes an accessible name and state.
Interactive primitive
Accordion
A progressive-disclosure pattern with native keyboard operation and an explicit expanded relationship.
Component guidance
Preview preset
Use when
Use to reveal supporting detail without interrupting the primary scan path.
Avoid when
Do not hide essential instructions or the only way to complete a task inside the panel.
Accessibility
The trigger is a button whose aria-expanded state controls a labelled content region.

Button

Form Field

Switch

Accordion

Component guidance