Skip to content
On this page

TextField

Use text field outside a form.
  • Alpha
  • Not reviewed for accessibility
On this page

A text field suitable for use outside a form. For a text field input suitable for use within an HTML form, see the Primer::Forms namespace.

Arguments

NameTypeDefaultDescription
nameStringN/AValue for the HTML name attribute.
idStringN/AValue for the HTML id attribute.
classStringN/AA list of CSS classes to add to the input. Exists for compatibility with Rails form builders.
classesStringN/AA list of CSS classes to add to the input. Combined with the :class argument.
captionStringN/ACaption text to render below the input.
labelStringN/ALabel text displayed above the input.
visually_hide_labelBooleanN/AWhether or not to visually hide the label. If true the label will be hidden visually but still available to screen readers.
sizeSymbolN/AThe size of the field. One of :large, :medium, or :small.
show_clear_buttonBooleanN/AWhether or not to include a clear button inside the input that clears the input's contents when clicked.
clear_button_idStringN/AThe HTML id attribute of the clear button.
full_widthBooleanN/AControls whether or not the input takes the full width of its container.
disabledBooleanN/AWhether or not the input should accept keyboard and mouse input.
invalidBooleanN/AIf true, renders the input in a visually invalid state.
placeholderStringN/APlaceholder text.
insetBooleanN/AIf true, renders the input in a visually inset state.
monospaceBooleanN/AIf true, uses a monospace font for the input field.
leading_visualHashN/ARenders a leading visual icon before the text field's cursor. The hash will be passed to Primer's Octicon component.
validation_messageStringN/AA validation message to display beneath the input. Implicitly sets invalid to true.
label_argumentsHashN/ASystem arugments passed to the Rails builder's #label method. These arguments will appear as HTML attributes on the <label> tag.
system_argumentsHashN/ASystem arguments
blockProcN/AUnused.

Examples

Default

<%= render(Primer::Alpha::TextField.new(name: :first_name, label: "First name")) %>

With a clear button

<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
show_clear_button: true
)
) %>

Full width

<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
full_width: true
)
) %>

Disabled

<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
disabled: true
)
) %>

Invalid

<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
invalid: true
)
) %>

With a leading visual

<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
leading_visual: {
icon: :person
}
)
) %>

With a caption

What your friends call you
<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
caption: "What your friends call you"
)
) %>

With a validation message

Hmm, that doesn't look right
<%= render(
Primer::Alpha::TextField.new(
name: :first_name,
label: "First name",
validation_message: "Hmm, that doesn't look right"
)
) %>