Form

App

Form layout wrapper. title, description, error ve actionsContent slot'ları. columns prop ile 1 veya 2 kolonlu grid düzeni.

Single column

Preview

Edit Profile

Update your personal information.

Code 
<%- include('modules/app/Form', {
  title:       'Edit Profile',
  description: 'Update your personal information.',
  action:      '/account/profile',
  actionsContent: `
    <%- include('modules/ui/Button', { variant: 'outline', children: 'Cancel', href: '/account' }) %>
    <%- include('modules/ui/Button', { type: 'submit', children: 'Save changes' }) %>
  `,
  children: `
    <%- include('modules/ui/Input',    { label: 'Name',  name: 'name',  value: user.name }) %>
    <%- include('modules/ui/Input',    { label: 'Email', name: 'email', type: 'email', value: user.email }) %>
    <%- include('modules/ui/Textarea', { label: 'Bio',   name: 'bio',   value: user.bio }) %>
  `
}) %>

Two column

Preview

Personal Details

Code 
<%- include('modules/app/Form', {
  title:   'Personal Details',
  columns: 2,
  action:  '/account/details',
  actionsContent: `<%- include('modules/ui/Button', { type: 'submit', children: 'Save' }) %>`,
  children: `
    <%- include('modules/ui/Input', { label: 'First Name', name: 'firstName' }) %>
    <%- include('modules/ui/Input', { label: 'Last Name',  name: 'lastName'  }) %>
    <%- include('modules/ui/Input', { label: 'Email',      name: 'email', type: 'email' }) %>
    <%- include('modules/ui/Input', { label: 'Phone',      name: 'phone', type: 'tel' }) %>
  `
}) %>
Source modules/app/Form.ejs