%section
  %a.scroll-target{name: 'forms'}
  %a.scroll-target{name: 'forms__default'}
  %h3.color-black Form elements
  %p
    Form elements are generally confined to a panel div (.panel.panel--padded).
    Below are samples of all available form elements generated by the
    Tenon::FormBuilder

  .panel.panel--padded
    = f.text_field :text, label: 'Text field'
    %code f.text_field :text, label: 'Text field'

    %hr.hr--dashed

    = f.title_text_field :text, label: 'Title field', placeholder: 'A sample title field'
    %code f.title_text_field :text, class: 'form-title-field', label: 'Title field', placeholder: 'A sample title field'

    %hr.hr--dashed

    = f.text_field :text, required: true, label: 'Required title text field', placeholder: 'This field is required!'
    %code f.text_field :text, required: true, label: 'Required title text field', placeholder: 'This field is required!'

    %hr.hr--dashed

    = f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
    %code f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'

    %hr.hr--dashed

    = f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
    %code f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'

    %hr.hr--dashed

    = f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Select'
    %code f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Select'

    %hr.hr--dashed

    = f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Multiple select', multiple: true
    %code f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Multiple select', multiple: true

    %hr.hr--dashed

    = f.date_time_picker :text, label: 'Date & Time'
    %code f.date_time_picker :text, label: 'Date & Time'

    %hr.hr--dashed

    = f.check_box :text, label: 'Use this for a single check box option', explanation: 'This is how a stand alone check box works'
    %code f.check_box :text, label: 'Use this for a single check box option', explanation: 'This is how a stand alone check box works'

    %hr.hr--dashed

    = input_block 'Select a few check boxes', explanation: 'This is how a group of check boxes works' do
      = f.inline_check_box :text, label: 'One'
      = f.inline_check_box :text, label: 'Two'
      = f.inline_check_box :text, label: 'Three'
    %code
      %p input_block 'Select a few check boxes', explanation: 'This is how a group of check boxes works' do
      %p   f.inline_check_box :text, label: 'One'
      %p   f.inline_check_box :text, label: 'Two'
      %p   f.inline_check_box :text, label: 'Three'

    %hr.hr--dashed

    = f.radio_button :text, 'value', label: 'Select this standalone radio button if you have one option', explanation: 'This is how a stand alone radio button works'
    %code
      f.radio_button :text, 'value', label: 'Select this standalone radio button if you have one option', explanation: 'This is how a stand alone radio button works'

    %hr.hr--dashed

    = input_block 'This is some radio actions', explanation: 'This explains the group of radio_buttons' do
      = f.inline_radio_button :text, 'value1', label: 'Option 1'
      = f.inline_radio_button :text, 'value2', label: 'Option 2'
      = f.inline_radio_button :text, 'value3', label: 'Option 3'
    %code
      %p input_block 'This is some radio actions', explanation: 'This explains this group of radio_buttons' do
      %p   f.inline_radio_button :text, 'value1', label: 'Option 1'
      %p   f.inline_radio_button :text, 'value2', label: 'Option 2'
      %p   f.inline_radio_button :text, 'value3', label: 'Option 3'

    %hr.hr--dashed

    = f.text_area :text, label: 'Text area'
    %code f.text_area :text, label: 'Text area'

    %hr.hr--dashed

    = f.rich_text :text, label: 'Text area with WYSIWIG'
    %code f.rich_text :text, label: 'Text area with WYSIWIG'