Form Input

Basic text input form fields with 'floating' labels

React Component

Text (default)

First name

This is a message

Text (with error)

First name

This is a message

Text (prefilled)

Country

Text (prefilled) with hidden label

Country

Text (disabled)

PO Box

This is a message

Text (readonly)

Can't touch this

This is a message

Email

Email address

This is a message

Password

Create a password

Numbers

Enter quantity (max 48)

Numbers (incremented)

Enter percentage (max 5%)

Prefixed

Custom domain

Suffixed

Price per month

Custom placeholder & label visible

Reply-to email

With Static Icon

First name

With Static Icon with Error

First name

This is a message

With Popover

Sage Component

SageFormInput

<fieldset class="sage-type">

  <h3 class="t-sage-heading-6">Text (default)</h3>
  <%= sage_component SageFormInput, {
    id: "form__fname1",
    input_type: "text",
    label_text: "First name",
    placeholder: "First name",
    required: true,
    disabled: false,
    has_error: false,
    name: "custom_input_name",
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Text (with error)</h3>
  <%= sage_component SageFormInput, {
    id: "form__fname2",
    input_type: "text",
    label_text: "First name",
    placeholder: "First name",
    required: true,
    disabled: false,
    has_error: true,
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Text (prefilled)</h3>
  <%= sage_component SageFormInput, {
    id: "form__country1",
    input_type: "text",
    label_text: "Country",
    placeholder: "Country",
    value: "USA",
    required: true,
    disabled: false,
    has_error: false,
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Text (prefilled) with hidden label</h3>
  <%= sage_component SageFormInput, {
    id: "form__country2",
    input_type: "text",
    label_text: "Country",
    placeholder: "Country",
    value: "USA",
    required: true,
    disabled: false,
    has_error: false,
    has_placeholder: false,
    hide_label: true
  } %>

  <h3 class="t-sage-heading-6">Text (disabled)</h3>
  <%= sage_component SageFormInput, {
    id: "form__apt",
    input_type: "text",
    label_text: "PO Box",
    placeholder: "PO Box",
    required: true,
    disabled: true,
    has_error: false,
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Text (readonly)</h3>
  <%= sage_component SageFormInput, {
    id: "form__readonly",
    value: "This text can't be modified by the user",
    input_type: "text",
    label_text: "Can't touch this",
    placeholder: "Can't touch this",
    required: false,
    disabled: false,
    readonly: true,
    has_error: false,
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Email</h3>
  <%= sage_component SageFormInput, {
    id: "form__email",
    input_type: "email",
    label_text: "Email address",
    placeholder: "Email address",
    required: true,
    disabled: false,
    has_error: false,
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Password</h3>
  <%= sage_component SageFormInput, {
    id: "form__pw",
    input_type: "password",
    label_text: "Create a password",
    placeholder: "Create a password",
    required: true,
    disabled: false,
    minlength: "8",
    maxlength: "128",
    has_error: false,
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Numbers</h3>
  <%= sage_component SageFormInput, {
    id: "form__num1",
    input_type: "number",
    label_text: "Enter quantity (max 48)",
    placeholder: "Enter quantity (max 48)",
    required: true,
    disabled: false,
    input_mode: "numeric",
    pattern: "[0-9]{2}",
    max: "48",
    maxlength: "2",
    has_error: false,
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Numbers (incremented)</h3>
  <%= sage_component SageFormInput, {
    id: "form__num2",
    input_type: "number",
    label_text: "Enter percentage (max 5%)",
    placeholder: "Enter percentage (max 5%)",
    required: true,
    disabled: false,
    input_mode: "numeric",
    max: "5",
    maxlength: "2",
    min: "0",
    step: "0.5",
    has_error: false,
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Prefixed</h3>
  <%= sage_component SageFormInput, {
    id: "form__pre",
    input_type: "text",
    label_text: "Custom domain",
    placeholder: "Custom domain",
    required: true,
    disabled: false,
    input_mode: "text",
    pattern: "[a-z]+\.[a-zA-Z0-9\/\-]+",
    has_error: false,
    prefix: "https://",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Suffixed</h3>
  <%= sage_component SageFormInput, {
    id: "form__suf",
    input_type: "number",
    label_text: "Price per month",
    placeholder: "Price per month",
    required: true,
    disabled: false,
    input_mode: "numeric",
    pattern: "[0-9]{6}",
    max: "100000",
    maxlength: "6",
    has_error: false,
    suffix: ".00",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">Custom placeholder & label visible</h3>
  <%= sage_component SageFormInput, {
    id: "form__reply1",
    input_type: "text",
    label_text: "Reply-to email",
    placeholder: "Custom placeholder text",
    required: true,
    disabled: false,
    has_error: false,
    has_placeholder: true
  } %>

  <h3 class="t-sage-heading-6">With Static Icon</h3>
  <%= sage_component SageFormInput, {
    icon: "info-circle",
    id: "form__fname3",
    input_type: "text",
    label_text: "First name",
    placeholder: "First name",
    required: true,
    disabled: false,
    has_error: false,
    name: "custom_input_name",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">With Static Icon with Error</h3>
  <%= sage_component SageFormInput, {
    icon: "info-circle",
    id: "form__fname4",
    input_type: "text",
    label_text: "First name",
    placeholder: "First name",
    required: true,
    disabled: false,
    has_error: true,
    name: "custom_input_name",
    message_text: "This is a message",
    has_placeholder: false
  } %>

  <h3 class="t-sage-heading-6">With Popover</h3>
  <%= sage_component SageFormInput, {
    id: "form__fname5",
    input_type: "text",
    label_text: "First name",
    placeholder: "First name",
    required: true,
    disabled: false,
    has_error: false,
    name: "custom_input_name",
    has_placeholder: false
  } do %>
    <%= content_for :sage_form_input_popover do %>
      <%= sage_component SagePopover, {
        icon: "info-circle",
        link: {
          href: "#",
          name: "Learn more about a thing",
        },
        popover_position: "left",
        trigger_value: "Open Menu",
        trigger_icon_only: true,
      } do %>
        <p>I can put whatever content I want in here and use the custom class as a hook to style it like a good 'ol BEM mixin!</p>
      <% end %>
    <% end %>
  <% end %>

</fieldset>

Property	Description	Type	Default
`autocomplete`	Enables the browser to autofill values from saved fields or password managers. Refer to the allowed values for acceptable properties.	String	`nil`
`disabled`	Enabling this property adds the `disabled` attribute to the component. Note that `disabled` input fields will not be submitted in forms.	Boolean	`false`
`has_error`	Enabling this property adds the `.sage-form-field--error` class to the component.	Boolean	`false`
`has_placeholder`	Enabling this property adds the `.sage-form-field--showplaceholder` class to the component.	Boolean	`false`
`icon`	Adds a static icon for visual context. See Icons under "Foundations."	String	`nil`
`id` required	Unique identifier for this input field. Should match the `for` property on the corresponding label.	String	`nil`
`input_mode`	Hints at the type of data to be entered. Primarily intended for mobile devices, this can influence the type of control displayed, for example a numeric input keypad instead of a standard text keyboard.	String	`nil`
`input_type`	Sets the `type` attribute for the component	String	`nil`
`label_text`	Sets the label text for the component.	String	`nil`
`max`	Sets the maximum numerical value for a form field.	String	`nil`
`maxlength`	Sets the maximum character length for a form field.	String	`nil`
`message_text`	Sets the message text for the component.	String	`nil`
`min`	Sets the minimum value for a numeric form field (ex. `number` or `datetime-local` input types)	String	`nil`
`minlength`	Sets the minimum character length for a form field.	String	`nil`
`name`	Unique identifier for this component. Defaults to the value provided for `id` when left blank.	String	`nil`
`pattern`	Specifies a form field's validation pattern using regex. Ignored with `number` input types (use `min` and `max` instead). See MDN for usage.	String	`nil`
`placeholder`	Inserts content to be displayed inside a default (empty) field.	String	`nil`
`prefix`	Sets prefix text to be prepended to the component.	String	`nil`
`required`	Adding this attribute allows basic HTML form validation on this field.	String	`nil`
`readonly`	Enabling this property adds the `readonly` attribute, preventing the user from editing the field, but allowing manipulation of the value via JavaScript. Unlike with `disabled`, `readonly` values will be submitted in a form.	Boolean	`false`
`required`	Adding this attribute allows basic HTML form validation on this field.	Boolean	`false`
`step`	When applied to a numeric (`number`, `date`, `month`, etc) form field, this allows the browser control to be increase or decrease the value in defined increments	String	`nil`
`suffix`	Sets suffix text to be appended to the component.	String	`nil`
`value`	Sets the value for the component.	String	`nil`
Sections		`Element`
`sage_form_input_popover`	Provides the HTML content for the popover component, rendered at the right end of the form input.	Restricted to Popover `sage_component`.

Use of text inputs without a corresponding label is possible, but not recommended
Ensure that the label element follows the input in the HTML in order to properly apply the "floating label" effect
Use unique id and name values for each field
Match the placeholder and label text precisely, or the "floating label" effect may appear jarring
Take advantage of HTML client-side validation for basic fields – baked-in with most browsers

Don't

Placeholders are not intended for detailed instructions—make use of adjacent text instead
Do not rely on HTML client-side validation when complex and/or secure requirements are involved, such as password validation and generation
title attributes are discouraged for use in input fields, as they are not consistently accessible for assistive technology users.