Class: Yattho::Alpha::TextField

Inherits:

Component

• Object
• ViewComponent::Base
• Component
• Yattho::Alpha::TextField

Defined in:

app/components/yattho/alpha/text_field.rb

Overview

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

Constant Summary

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary

• #initialize ⇒ Object constructor

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize ⇒ Object

Examples:

Default

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

With a clear button

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

Full width

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

Disabled

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

Invalid

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

With a leading visual

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

With a caption

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

With a validation message

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

Parameters:

• name (String) —

  Value for the HTML name attribute.

• id (String) —

  Value for the HTML id attribute.

• class (String) —

  A list of CSS classes to add to the input. Exists for compatibility with Rails form builders.

• classes (String) —

  A list of CSS classes to add to the input. Combined with the ‘:class` argument.

• caption (String) —

  Caption text to render below the input.

• label (String) —

  Label text displayed above the input.

• visually_hide_label (Boolean) —

  Whether or not to visually hide the label. If ‘true` the label will be hidden visually but still available to screen readers.

• size (Symbol) —

  The size of the field. <%= one_of(Yattho::Forms::Dsl::Input::SIZE_OPTIONS) %>

• show_clear_button (Boolean) —

  Whether or not to include a clear button inside the input that clears the input’s contents when clicked.

• clear_button_id (String) —

  The HTML id attribute of the clear button.

• full_width (Boolean) —

  Controls whether or not the input takes the full width of its container.

• disabled (Boolean) —

  Whether or not the input should accept keyboard and mouse input.

• invalid (Boolean) —

  If ‘true`, renders the input in a visually invalid state.

• placeholder (String) —

  Placeholder text.

• inset (Boolean) —

  If ‘true`, renders the input in a visually inset state.

• monospace (Boolean) —

  If ‘true`, uses a monospace font for the input field.

• leading_visual (Hash) —

  Renders a leading visual icon before the text field’s cursor. The hash will be passed to Yattho’s [Octicon component](yattho.com/view-components/components/octicon).

• validation_message (String) —

  A validation message to display beneath the input. Implicitly sets ‘invalid` to `true`.

• label_arguments (Hash) —

  System arugments passed to the Rails builder’s ‘#label` method. These arguments will appear as HTML attributes on the `<label>` tag.

• system_arguments (Hash) —

  <%= link_to_system_arguments_docs %>

• block (Proc) —

  Unused.

# File 'app/components/yattho/alpha/text_field.rb', line 12