Templates UI Components

Starter Kit Components

The Hypermedia starter kit includes a full collection of unstyled, accessible UI components. Each component passes unknown properties through as HTML attributes, allowing you to directly style them with utility classes (like Tailwind CSS) or customize their behavior.

§ Layout

Renders the outer HTML layout shell with head and body tags.

@layout()
  <main>Page contents go here</main>
@end

§ Form

Renders a form element with automated CSRF protection field injection.

Prop	Type	Description
`action`	`string`	The form action endpoint URL.
`method`	`string`	HTTP verb (supports method spoofing for PUT, PATCH, and DELETE).
`route`	`string`	Target named route identifier to resolve the action URL.
`routeParams`	`array`	Dynamic parameters for resolving URL route wildcards.

@form({ route: 'posts.store', method: 'POST' })
  <!-- Form fields go here -->
@end

@form({ route: 'posts.update', method: 'PUT', routeParams: [post.ID] })
  <!-- Edit fields -->
@end

§ Form Field Components

Form field elements collaborate to output unified controls with automated labels and input validation error tracking.

field.root

Context provider container to group labeling, input controls, and validation errors.

@field.root({ name: 'email', id: 'user-email' })
  <!-- Inputs, labels, and error tags -->
@end

field.label

Renders label tag mapping the associated control target ID.

@!field.label({ text: 'Email Address' })

field.error

Conditionally displays validation warnings retrieved from session flash memory.

@!field.error()

input.control

Renders a standard input tag. Passes properties down as HTML attributes.

@!input.control({ type: 'text', placeholder: 'Name' })

select.control

Renders selection menus using an options data array.

@!select.control({
  options: [
    { name: 'Admin', value: 'admin' },
    { name: 'User', value: 'user' }
  ]
})

textarea.control

Renders multi-line textarea boxes.

@!textarea.control({ rows: '4', placeholder: 'Biography...' })

§ Selection Choices

checkbox.group / checkbox.control

Groups related checkboxes under a unified array-like post key:

@checkbox.group({ name: 'roles' })
  @field.root({ id: 'role-editor' })
    @!checkbox.control({ value: 'editor' })
    @!field.label({ text: 'Editor Role' })
  @end
@end

radio.group / radio.control

Groups mutually exclusive radio select fields:

@radio.group({ name: 'plan' })
  @field.root({ id: 'plan-free' })
    @!radio.control({ value: 'free' })
    @!field.label({ text: 'Free Plan' })
  @end
  @field.root({ id: 'plan-pro' })
    @!radio.control({ value: 'pro' })
    @!field.label({ text: 'Pro Plan' })
  @end
@end

§ Alerts

Displays feedback prompts or diagnostic status messages.

@alert.root({ variant: 'destructive', autoDismiss: true })
  @!alert.title({ text: 'Error Occurred' })
  @!alert.description({ text: 'Unable to process transaction.' })
@end

§ Navigation & Action Buttons

Submit actions or link paths:

@!button({ text: 'Submit Entry', type: 'submit' })

@!link({ route: 'posts.show', routeParams: [post.ID], text: 'View Post' })

§ Debugging Templates

Inspect active template state values inline without breaking execution:

<!-- Dump specific variable context -->
@dump(posts)

<!-- Dump complete template local scope map -->
@dump(state)