headmin 0.2.5 → 0.3.1

data/app/views/headmin/forms/_label.html.erb

@@ -1,24 +1,30 @@
 <%
   # name: headmin/forms/label
   #
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
   # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>name<tt> - Custom label to be used instead of the attribute
-  # * <tt>required<tt> - Set to true if you want to highlight the requirement
+  # * +class+ - Optional HTML class attribute
+  # * +for+ - Set reference to the input id
+  # * +required+ - Set to true if you want to highlight the requirement
+  # * +text+ - Custom label to be used instead of the attribute
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
+  # https://apidock.com/rails/v5.2.3/ActionView/Helpers/FormHelper/label
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/label', form: form, attribute: :image %#>
 
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  name = local_assigns.has_key?(:name) && name ? name.to_s.humanize : attribute
-  required = local_assigns.has_key?(:required) ? required : false
-
-  options = {
-    class: "form-label #{class_names}",
-    required: required,
+  text = local_assigns[:text]
+  default_options = {
+    class: ['form-label', local_assigns[:class]].join(' '),
+    form: form.options[:id],
   }
+  options = default_options.merge(local_assigns.slice(*%i(for required)).compact)
 %>
 
-<%= form.label name, options %>
+<%= form.label attribute, text, options %>

data/app/views/headmin/forms/_number.html.erb

@@ -1,50 +1,53 @@
 <%
   # headmin/forms/number
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>collection<tt> - Add array of options to show in a data list
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== Optional parameters
+  # * +aria+ - Provide a hash to define all aria attributes
+  # * +autocomplete+ - Value to be autofilled by the browser
+  # * +autofocus+ - Set to true to focus on this field when the page renders
+  # * +data+ - Provide a hash to define all data attributes
+  # * +disabled+ - Sets the placeholder of the field
+  # * +id+ - Input identifier
+  # * +in+ -  Range specifying the +min+ and +max+ values
+  # * +list+ - Add array of options to show in a data list
+  # * +max+ - The maximum acceptable value
+  # * +min+ - The minimum acceptable value
+  # * +placeholder+ - Sets the placeholder of the field
+  # * +readonly+ - Sets the placeholder of the field
+  # * +required+ - Set to true to mark as required
+  # * +step+ - The acceptable value granularity
+  # * +value+ - Overrides the value of the form
+  # * +within+ - Same as +in+
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/number_field
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/number', form: form, attribute: :amount %#>
+  #
+  #   With data-list
+  #   <%= render 'headmin/forms/number', form: form, attribute: :amount, list: [2,4,6,8,10] %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  collection = local_assigns.has_key?(:collection) ? collection : nil
-  data = local_assigns.has_key?(:data) ? data : nil
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
+  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
 
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    list: collection ? attribute : nil,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
+  option_keys = %i(aria autocomplete autofocus data disabled id in list max min placeholder readonly required step value within)
+  options = local_assigns.slice(*option_keys).merge(
+    aria: { describedby: form_field_validation_id(form, attribute) },
+    class: ['form-control', form_field_validation_class(form, attribute)].join(' '),
+    list: local_assigns[:list] ? "#{attribute}_list" : nil,
+    placeholder: placeholder
+  )
 %>
 
-<%= render 'headmin/forms/base', form: form, attribute: attribute, append: append, prepend: prepend, float: float, label: label, required: required do |form| %>
+<%= render 'headmin/forms/base', local_assigns do |form| %>
   <%= form.number_field(attribute, options) %>
 <% end %>
-
-<% if collection %>
-  <datalist id="<%= attribute %>">
-    <% collection.each do |key, value| %>
-      <option value="<%= value %>"><%= key %></option>
-    <% end %>
-  </datalist>
-<% end %>

data/app/views/headmin/forms/_password.html.erb

@@ -1,69 +1,48 @@
 <%
   # headmin/forms/password
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== Optional parameters
+  # * +aria+ - Provide a hash to define all aria attributes
+  # * +autocomplete+ - Value to be autofilled by the browser
+  # * +autofocus+ - Set to true to focus on this field when the page renders
+  # * +data+ - Provide a hash to define all data attributes
+  # * +disabled+ - Sets the placeholder of the field
+  # * +id+ - Input identifier
+  # * +list+ - Add array of options to show in a data list
+  # * +maxlength+ - The maximum number of characters that the browser will allow the user to enter.
+  # * +minlength+ - The minimum number of characters that the browser will allow the user to enter.
+  # * +placeholder+ - Sets the placeholder of the field
+  # * +readonly+ - Sets the placeholder of the field
+  # * +required+ - Set to true to mark as required
+  # * +size+ - The number of visible characters that will fit in the input
+  # * +value+ - Overrides the value of the form
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
+  # https://apidock.com/rails/ActionView/Helpers/FormHelper/password_field
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/password', form: form, attribute: :password %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  data = local_assigns.has_key?(:data) ? data : nil
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
-
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
+  placeholder = local_assigns[:float] ? local_assigns[:placeholder] || attribute : local_assigns[:placeholder]
 
-  show_label = label != false
+  option_keys = %i(aria autocomplete autofocus data disabled id list maxlength minlength placeholder readonly required size value)
+  options = local_assigns.slice(*option_keys).merge(
+    autocomplete: true,
+    aria: { describedby: form_field_validation_id(form, attribute) },
+    class: ['form-control', form_field_validation_class(form, attribute)].join(' '),
+    placeholder: placeholder
+  )
 %>
 
-<div class="<%= 'form-floating' if float %> <%= ('mb-3 text-start' if show_label) %>">
-  <% if show_label && !float %>
-    <%= render 'headmin/forms/label', form: form, attribute: attribute, name: label, required: required %>
-  <% end %>
-
-  <% if float %>
-    <%= form.password_field(attribute, options) %>
-    <%= render 'headmin/forms/validation', form: form, attribute: attribute %>
-  <% else %>
-    <div class="input-group">
-      <% if prepend %>
-      <span class="input-group-text">
-        <%= prepend %>
-      </span>
-      <% end %>
-
-      <%= form.password_field(attribute, options) %>
-      <%= render 'headmin/forms/validation', form: form, attribute: attribute %>
-
-      <% if append %>
-      <span class="input-group-text">
-        <%= append %>
-      </span>
-      <% end %>
-    </div>
-  <% end %>
-
-  <% if show_label && float %>
-    <%= render 'headmin/forms/label', form: form, attribute: attribute, name: label, required: required %>
-  <% end %>
-</div>
+<%= render 'headmin/forms/base', local_assigns do |form| %>
+  <%= form.password_field(attribute, options) %>
+<% end %>

data/app/views/headmin/forms/_redactorx.html.erb

@@ -2,16 +2,16 @@
   # headmin/forms/redactorx
   #
   # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>addbar<tt> - Items to show in the addbar
-  # * <tt>topbar<tt> - Items to show in the topbar
-  # * <tt>plugins<tt> - Plugin items to work with
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  # * +label+ - Text to show as label. Label will be hidden if value is false
+  # * +addbar+ - Items to show in the addbar
+  # * +topbar+ - Items to show in the topbar
+  # * +plugins+ - Plugin items to work with
   #
   # ==== Examples
   #   Basic version
-  #   <%= render 'headmin/forms/textarea', form: form, attribute: :title %#>
+  #   <%= render 'headmin/forms/redactorx', form: form, attribute: :title %#>
 
   class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
   data = local_assigns.has_key?(:data) ? data : {}
@@ -24,6 +24,7 @@
   topbar = local_assigns.has_key?(:topbar) ? topbar : []
 
   data = data.merge(
+    controller: 'redactorx',
     'redactor-options': {
       buttons: {
         addbar: addbar,

data/app/views/headmin/forms/_repeater.html.erb

@@ -2,12 +2,12 @@
   # headmin/forms/repeater
   #
   # ==== Options
-  # * <tt>form</tt> -  Form object
-  # * <tt>attribute</tt> - Name of the attribute of the form model
-  # * <tt>header</tt> - Name of the template to use as header
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>templates</tt> - List of all views that can be used as a template for a new block
-  # * <tt>flush</tt> - Set to true if you want the list items to sit flush with its parent.
+  # * +form</tt> -  Form object
+  # * +attribute</tt> - Name of the attribute of the form model
+  # * +header</tt> - Name of the template to use as header
+  # * +label+ - Text to show as label. Label will be hidden if value is false
+  # * +templates</tt> - List of all views that can be used as a template for a new block
+  # * +flush</tt> - Set to true if you want the list items to sit flush with its parent.
   #
   # ==== Examples
   #   # Basic version
@@ -41,7 +41,8 @@
   template_names = template_names.any? ? template_names : ['new']
   object_model = form.object.class
   association_model = object_model.reflect_on_association(attribute).class_name.constantize
-  with_positions = association_model.new.attributes.keys.include?('position')
+  association_object = association_model.new
+  with_positions = association_object.attributes.keys.include?('position')
   associations = form.object.send(attribute)
   associations = with_positions ? associations.order(:position) : associations
   repeater_id = form.object_id
@@ -114,15 +115,11 @@
 
     <!-- Templates -->
     <% template_names.each do |name| %>
-      <template data-repeater-target="template" data-template-name="<%= name %>">
-        <%= form.fields_for attribute, association_model.new, child_index: 'template_id' do |ff| %>
+      <template data-repeater-target="template" data-template-name="<%= name %>" data-template-id-regex="<%= association_object.object_id %>">
+        <%= form.fields_for attribute, association_object, child_index: association_object.object_id do |ff| %>
           <%= render 'headmin/forms/repeater/row', form: ff, pass_thru: pass_thru, repeater_id: repeater_id do %>
             <% template = templates.detect { |t| t.include?("/#{name}.") } %>
-            <% if template %>
-              <%= render(template.gsub('/_', '/'), form: ff) %>
-            <% else %>
-              <% yield(ff) %>
-            <% end %>
+            <% yield(ff, template&.gsub('/_', '/')) %>
           <% end %>
         <% end %>
       </template>

data/app/views/headmin/forms/_select.html.erb

@@ -1,31 +1,45 @@
 <%
   # headmin/forms/select
   #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>collection<tt> - Values to create option tags for
-  # * <tt>multiple<tt> - Set to true if multiple selections are allowed
-  # * <tt>tags<tt> - Set to true if new options are allowed to be created
-  # * <tt>disabled<tt> - One or more values to be disabled in the option tags
-  # * <tt>selected<tt> - Value to be marked as "selected"
-  # * <tt>include_blank<tt> - Set to true or prompt string if the first option tag is a blank
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +attribute+ - Name of the attribute of the form model
+  # * +collection+ - Values to create option tags for
+  #
+  # ==== Optional parameters
+  # * +aria+ - Provide a hash to define all aria attributes
+  # * +autocomplete+ - Value to be autofilled by the browser
+  # * +autofocus+ - Set to true to focus on this field when the page renders
+  # * +data+ - Optional HTML data attributes
+  # * +disabled+ - One or more values to be disabled in the option tags
+  # * +include_blank+ - Set to true or prompt string if the first option tag is a blank
+  # * +multiple+ - Set to true if multiple selections are allowed
+  # * +required+ - Set to true to mark as required
+  # * +selected+ - Value to be marked as "selected"
+  # * +size+ - The number of visible rows in a multiple select field
+  # * +tags+ - Set to true if new options are allowed to be created
+  #
+  # ==== Extra parameters
+  # Listed in 'headmin/forms/base'
+  #
+  # ==== References
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+  # https://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/select
   #
   # ==== Examples
   #   Basic version
   #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'] %#>
   #
-  #   Specify options to be disabled
+  #   Disabled
+  #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'], disabled: true %#>
+  #
+  #   Disable specific options
   #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'], disabled: ['red'] %#>
   #
   #   Show blank option
   #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'], include_blank: 'Pick a color' %#>
   #
-  #   Select a given option by default
+  #   Select a default option
   #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'], selected: 'green' %#>
   #
   #   Allow multiple options to be selected
@@ -34,37 +48,21 @@
   #   Allow multiple options to be selected and new options to be created
   #   <%= render 'headmin/forms/select', form: form, attribute: :color, collection: ['red', 'green', 'blue'], tags: true %#>
 
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  data = local_assigns.has_key?(:data) ? data : {}
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  include_blank = local_assigns.has_key?(:include_blank) ? include_blank : nil
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  multiple = local_assigns.has_key?(:multiple) ? multiple : false
-  required = local_assigns.has_key?(:required) ? required : false
-  selected = local_assigns.has_key?(:selected) ? selected : nil
-  tags = local_assigns.has_key?(:tags) ? tags : false
-
-  data = data.merge({ tags: true }) if tags
-
-  choices = options_for_select(collection, form.object.send(attribute))
-  options = {
-    include_blank: include_blank,
-    disabled: disabled,
-    selected: selected
-  }
-  html_options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-select #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    multiple: tags ? true : multiple,
-    required: required,
-  }
+  options_keys = %i(include_blank selected disabled)
+  options = local_assigns.slice(*options_keys).merge(
+    selected: form.object&.send(attribute),
+  )
 
+  html_option_keys = %i(aria autocomplete autofocus data disabled id multiple required size)
+  html_options = local_assigns.slice(*html_option_keys).merge(
+    aria: { describedby: form_field_validation_id(form, attribute) },
+    class: ['form-select', form_field_validation_class(form, attribute)].join(' '),
+    data: { tags: local_assigns[:tags], controller: 'select'},
+    disabled: local_assigns[:disabled] == true,
+    multiple: local_assigns[:multiple] || local_assigns[:tags],
+  )
 %>
 
-<%= render 'headmin/forms/base', form: form, attribute: attribute, append: append, prepend: prepend, float: float, label: label, required: required do |form| %>
-  <%= form.select(attribute, choices, options, html_options) %>
+<%= render 'headmin/forms/base', local_assigns do |form| %>
+  <%= form.select(attribute, collection, options, html_options) %>
 <% end %>

data/app/views/headmin/forms/_text.html.erb

@@ -1,62 +1,97 @@
-<%
-  # headmin/forms/text
-  #
-  # ==== Options
-  # * <tt>form<tt> - Form object
-  # * <tt>attribute<tt> - Name of the attribute of the form model
-  # * <tt>label<tt> - Text to show as label. Label will be hidden if value is false
-  # * <tt>float<tt> - Set to true if you want to show floating labels
-  # * <tt>collection<tt> - Add array of options to show in a data list
-  # * <tt>append<tt> - Text or icon to be shown on the left hand side of the input, Doesn't work with float
-  # * <tt>prepend<tt> - Text or icon to be shown on the right hand side of the input, Doesn't work with float
-  #
-  # ==== Examples
-  #   Basic version
-  #   <%= render 'headmin/forms/text', form: form, attribute: :title %#>
-  #
-  #   Input without label
-  #   <%= render 'headmin/forms/text', form: form, attribute: :title, label: false %#>
-  #
-  #   Input with custom label
-  #   <%= render 'headmin/forms/text', form: form, attribute: :title, label: 'Intro' %#>
-  #
-  #   Input with floating label
-  #   <%= render 'headmin/forms/text', form: form, attribute: :title, float: true %#>
-  #
-  #   Provide a data-list
-  #   <%= render 'headmin/forms/text', form: form, attribute: :title, collection: ['option 1', 'option 2', 'options 3'] %#>
-
-  append = local_assigns.has_key?(:append) ? append : nil
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : false
-  collection = local_assigns.has_key?(:collection) ? collection : nil
-  data = local_assigns.has_key?(:data) ? data : nil
-  disabled = local_assigns.has_key?(:disabled) ? disabled : false
-  float = local_assigns.has_key?(:float) ? float : false
-  label = local_assigns.has_key?(:label) ? label : nil
-  prepend = local_assigns.has_key?(:prepend) ? prepend : nil
-  readonly = local_assigns.has_key?(:readonly) ? readonly : false
-  required = local_assigns.has_key?(:required) ? required : false
-
-  options = {
-    'aria-describedby': form_field_validation_id(form, attribute),
-    class: "form-control #{form_field_validation_class(form, attribute)} #{class_names}",
-    data: data,
-    disabled: disabled,
-    list: collection ? attribute : nil,
-    placeholder: attribute,
-    readonly: readonly,
-    required: required,
-  }
-%>
-
-<%= render 'headmin/forms/base', form: form, attribute: attribute, append: append, prepend: prepend, float: float, label: label, required: required do |form| %>
-  <%= form.text_field(attribute, options) %>
+<!--
+<% documentation do %>
+  # Text
+  This is a wrapper around the form helper `text_field()`.
+  You can pass all valid input attributes as parameters to this template and
+  they will be added directly to the input field.
+
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "basic_example" %>
+  <% end %>
+  ```
+
+  ## Parameters
+  | Name         | Required | Type             | Description |
+  | ------------ | -------- | ---------------- | ----------- |
+  | form         | yes      | Object           | Form object |
+  | attribute    | yes      | String, Symbol   | Name of the attribute of the form model |
+  | aria         | no       | Hash             | Provide a hash to define all aria attributes |
+  | autocomplete | no       | String           | Hint for form autofill feature |
+  | autofocus    | no       | Boolean          | Automatically focus the form control when the page is loaded |
+  | data         | no       | Hash             | Provide a hash to define all data attributes |
+  | disabled     | no       | Boolean          | Whether the form control is disabled |
+  | dirname      | no       | String           | Name of form field to use for sending the element"s directionality in form submission |
+  | id           | no       | String           | Input identifier |
+  | list         | no       | Array            | Add array of options to show in a data list |
+  | maxlength    | no       | Integer          | Maximum length (number of characters) of value |
+  | minlength    | no       | Integer          | Minimum length (number of characters) of value |
+  | pattern      | no       | String           | Pattern the value must match to be valid |
+  | placeholder  | no       | String           | Text that appears in the form control when it has no value set |
+  | readonly     | no       | Boolean          | The value is not editable |
+  | required     | no       | Boolean          | A value is required or must be check for the form to be submittable |
+  | size         | no       | Integer          | Size of the control |
+  | spellcheck   | no       | Boolean          | Indicate whether or not to enable spell checking by the browser |
+  | value        | no       | String           | The initial value of the control |
+
+  **Additional parameters**
+
+  This view makes use of [headmin/forms/base](https://headmin.test/forms/base) for labels and appendages.
+  Take a look at its documentation to get a complete overview of all additional parameters.
+
+  ## Examples
+
+  ### Sizing
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "Small", class: "input-group-sm", placeholder: ".input-group-sm" %>
+    <%= render "headmin/forms/text", form: form, attribute: "Medium", class: "input-group-md", placeholder: 'default size' %>
+    <%= render "headmin/forms/text", form: form, attribute: "Large", class: "input-group-lg", placeholder: ".input-group-lg" %>
+  <% end %>
+  ```
+
+  ### Labels
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "no_label", label: false, placeholder: "Without label" %>
+    <%= render "headmin/forms/text", form: form, attribute: "floating_label", float: true %>
+    <%= render "headmin/forms/text", form: form, attribute: "custom_label", label: "Custom label" %>
+  <% end %>
+  ```
+
+  ### Appendages
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "prepend", prepend: "€" %>
+    <%= render "headmin/forms/text", form: form, attribute: "append", append: "m²" %>
+    <%= render "headmin/forms/text", form: form, attribute: "prepend_and_append", prepend: "€", append: "m²" %>
+  <% end %>
+  ```
+
+  ### List
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "list", list: %w[red green blue], placeholder: "With data list" %>
+  <% end %>
+  ```
+
+  ### States
+  ```erbx
+  <%= form_with do |form| %>
+    <%= render "headmin/forms/text", form: form, attribute: "disabled", disabled: true, placeholder: "Disabled" %>
+    <%= render "headmin/forms/text", form: form, attribute: "readonly", readonly: true, placeholder: "Readonly" %>
+    <%= render "headmin/forms/text", form: form, attribute: "disabled_and_readonly", disabled: true, readonly: true, placeholder: "Disabled and readonly" %>
+  <% end %>
+  ```
+
+  ## References
+  - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)
+  - [APIdock](https://apidock.com/rails/ActionView/Helpers/FormHelper/text_field)
 <% end %>
+-->
+
+<% text = Headmin::Form::Text.new(local_assigns) %>
 
-<% if collection %>
-  <datalist id="<%= attribute %>">
-    <% collection.each do |key, value| %>
-      <option value="<%= value %>"><%= key %></option>
-    <% end %>
-  </datalist>
+<%= render "headmin/forms/base", text.local_assigns do |form| %>
+  <%= form.text_field(text.attribute, text.options) %>
 <% end %>