Form Input

Basic text input form fields with 'floating' labels


React Component

Text (default)

This is a message

Text (with error)

This is a message

Text (prefilled)

Text (prefilled) with hidden label

Text (disabled)

This is a message

Text (readonly)

This is a message

Email

This is a message

Password

Numbers

Numbers (incremented)

Prefixed

Suffixed

Custom placeholder & label visible

With Static Icon

With Static Icon with Error

This is a message

With Popover

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!

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.

Do
  • 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.