Skip to content

ComponentsForm

Components

Form

vee-validate + zod forms in the cds layout: 28px between fields, label → control 8px, CircleAlert messages, a footer that stacks on phones.

Create a project

Type a name, then clear it: CircleAlert + “Project name is required” (13px danger) and the danger ring on the control; the label keeps its colour. Submitting validates everything and focuses the first invalid control. aria-describedby links the description and the message; aria-invalid is only set while invalid.

Create a project

Optional. Helps the assistant stay on topic.

Light and dark

light

Optional. Helps the assistant stay on topic.

dark

Optional. Helps the assistant stay on topic.