%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'