Class: BetterUi::Forms::PasswordInputComponent

Inherits:
TextInputComponent show all
Defined in:
app/components/better_ui/forms/password_input_component.rb

Overview

Note:

The suffix_icon slot from TextInputComponent is not available in PasswordInputComponent as the suffix position is occupied by the visibility toggle button.

A password input component with visibility toggle functionality.

This component extends TextInputComponent to provide a password input field with a toggle button that allows users to show or hide the password text. The toggle button displays an eye icon when the password is hidden and an eye-slash icon when the password is visible.

The component inherits all features from TextInputComponent including labels, hints, errors, validation states, sizes, and the prefix_icon slot. The suffix position is reserved for the password visibility toggle button.

Examples:

Basic password input

<%= render BetterUi::Forms::PasswordInputComponent.new(
  name: "user[password]",
  label: "Password",
  placeholder: "Enter your password"
) %>

Password input with prefix icon (lock)

<%= render BetterUi::Forms::PasswordInputComponent.new(
  name: "user[password]",
  label: "Password",
  required: true
) do |component| %>
  <% component.with_prefix_icon do %>
    <svg class="h-5 w-5 text-gray-400">...</svg>
  <% end %>
<% end %>

With validation errors

<%= render BetterUi::Forms::PasswordInputComponent.new(
  name: "user[password]",
  label: "Password",
  errors: ["Password is too short", "Password must include a number"]
) %>

With hint text

<%= render BetterUi::Forms::PasswordInputComponent.new(
  name: "user[password]",
  label: "Password",
  hint: "Must be at least 8 characters with 1 number and 1 special character",
  required: true
) %>

Using with Rails form builder

<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
  <%= f.ui_password_input :password, hint: "Minimum 8 characters" %>
<% end %>

See Also:

Constant Summary

Constants inherited from TextInputComponent

TextInputComponent::TYPES

Constants inherited from BaseComponent

BaseComponent::SIZES

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Methods inherited from TextInputComponent

#with_prefix_icon, #with_suffix_icon

Methods inherited from BaseComponent

#call

Constructor Details

#initialize(name:, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ PasswordInputComponent

Initializes a new password input component.

All parameters are passed to TextInputComponent#initialize. See the parent class for detailed parameter descriptions.

Parameters:

  • name (String) —

    the name attribute for the input field (required for form submission)

  • value (String, nil) (defaults to: nil) —

    the current value of the input field

  • label (String, nil) (defaults to: nil) —

    the label text to display above the input

  • hint (String, nil) (defaults to: nil) —

    helpful hint text displayed below the input

  • placeholder (String, nil) (defaults to: nil) —

    placeholder text shown when input is empty

  • size (Symbol) (defaults to: :md) —

    the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md

  • disabled (Boolean) (defaults to: false) —

    whether the input should be disabled (non-interactive), defaults to false

  • readonly (Boolean) (defaults to: false) —

    whether the input should be readonly (viewable but not editable), defaults to false

  • required (Boolean) (defaults to: false) —

    whether the field is required (shows asterisk indicator), defaults to false

  • errors (Array<String>, String, nil) (defaults to: nil) —

    validation error messages to display below the input

  • container_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • label_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the label element

  • input_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the input element

  • hint_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the hint text

  • error_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes to pass through to the input element

Raises:

  • (ArgumentError) —

    if size is not one of the valid SIZES

See Also:



71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
# File 'app/components/better_ui/forms/password_input_component.rb', line 71

def initialize(
  name:,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  super(
    name: name,
    value: value,
    label: label,
    hint: hint,
    placeholder: placeholder,
    size: size,
    disabled: disabled,
    readonly: readonly,
    required: required,
    errors: errors,
    container_classes: container_classes,
    label_classes: label_classes,
    input_classes: input_classes,
    hint_classes: hint_classes,
    error_classes: error_classes,
    **options
  )
end