Form

The Form component (ui:form) renders a dynamic form with five field types. It captures structured input and emits all values on submit.

Examples

View Glyph Markdown source

```ui:form
title: Project Setup
description: Tell us about your project
submitLabel: Create Project
fields:
  - type: text
    id: name
    label: Project Name
    required: true
  - type: select
    id: framework
    label: Framework
    options: [React, Vue, Angular]
  - type: checkbox
    id: typescript
    label: Use TypeScript
    default: true
```

Contact form

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
description	string	No	—	Form description text.
submitLabel	string	No	"Submit"	Submit button text.
fields	FormField[]	Yes	—	Array of field definitions.
markdown	boolean	No	false	Enable inline markdown formatting (bold, italic, links, code) in text fields.

Field types

Fields use a discriminated union on the type property: text, textarea, select, checkbox, range.

Markdown Support

Enable inline markdown formatting in the form description:

View Glyph Markdown source

```ui:form
title: Project Setup
description: "Tell us about your **new project**. Read our [setup guide](https://example.com) for details."
submitLabel: Create Project
fields:
  - type: text
    id: name
    label: Project Name
    required: true
  - type: select
    id: framework
    label: Framework
    options: [React, Vue, Angular]
  - type: checkbox
    id: typescript
    label: Use TypeScript
    default: true
markdown: true
```

Supported formatting: bold, italic, code, links

Learn more about markdown in components →

Interaction events

Event kind: form-submit

Payload field	Type	Description
values	Record<string, string | number | boolean>	All field values by ID.
fields	Array<{ id, label, type, value }>	Field metadata with values.

Accessibility

• Uses native <form> with <label> associations.
• aria-required, aria-invalid, and aria-describedby on inputs.
• Required fields marked with visible * indicator.