Forms

Basic element components

These components are the basic building blocks for creating forms. Each of these elements can be used individually throughout the site, however it's recommended to use the field components when building forms in order to take advantage of their accessibility and responsive features.

Text input
= ui_component('forms/text_input', properties: {as_below} )
{
  id: "input_id",
  name: "text_name",
  maxlength: 10,
  placeholder: "Placeholder",
  value: "Existing Value",
  data: {
    key: "value",
    super: "man"
  }
}
Text area
= ui_component('forms/text_area', properties: {as_below} )
{
  id: "input_id",
  name: "text_name",
  placeholder: "Placeholder",
  value: "Existing Value",
  cols: 40,
  rows: 6,
  maxlength: 20
}
Date input
= ui_component('forms/date_input', properties: {as_below} )
{
  id: "input_id",
  class: "input--datepicker",
  name: "text_name",
  placeholder: "Choose Date",
  data: {
    key: "value",
    super: "man"
  }
}
Field components
Text field
= ui_component('forms/text_field', properties: {as_below} )
{
  label: "Field label",
  id: "text_id",
  maxlength: 10,
  name: "text_name",
  placeholder: "Placeholder",
  data: {
    key: "value",
    super: "man"
  }
}
Text area field
= ui_component('forms/text_area_field', properties: {as_below} )
{
  label: "Area label",
  id: "input_id",
  maxlength: 10,
  name: "text_name",
  placeholder: "Placeholder",
  cols: 40,
  rows: 4,
  readonly: true
}
Date field
= ui_component('forms/date_field', properties: {as_below} )
{
  label: "Choose Date",
  id: "text_id",
  name: "text_name",
  placeholder: "dd/mm/yyyy",
  data: {
    key: "value",
    super: "man"
  }
}
Checkbox Field
= ui_component('forms/checkbox_field', properties: {as_below} )
{
  id: "checkbox_field_id",
  name: "checkbox_name",
  checked: true,
  label: "This is the checkbox"
}
Radio Buttons Field
= ui_component('forms/radio_buttons_field', properties: {as_below} )
{
  id: "radio_buttons",
  label: "Radio options",
  options: [
    {
      name: "foo[]",
      id: "foo-1",
      value: "1",
      label: "One",
      data: {
        key: "value",
        super: "man"
      }
    },
    {
      name: "foo[]",
      id: "foo-2",
      value: "2",
      label: "Two",
      data: {
        key: "value",
        super: "man"
      }
    },
    {
      name: "foo[]",
      id: "foo-3",
      value: "3",
      label: "Three",
      data: {
        key: "value",
        super: "man"
      }
    }
  ]
}