Input

Text input fields for forms with label, hint, and error support.

Basic Input

A simple text input with label.

Email address

<%= render Rvk::InputComponent.new(
  name: "email",
  label: "Email address",
  placeholder: "you@example.com"
) %>

Input Types

Different input types for various data.

Text

Password

Number

<%= render Rvk::InputComponent.new(name: "text", type: :text, label: "Text", placeholder: "Enter text") %>
<%= render Rvk::InputComponent.new(name: "email", type: :email, label: "Email", placeholder: "you@example.com") %>
<%= render Rvk::InputComponent.new(name: "password", type: :password, label: "Password", placeholder: "••••••••") %>
<%= render Rvk::InputComponent.new(name: "number", type: :number, label: "Number", placeholder: "0") %>

Sizes

Inputs come in 3 sizes: sm, md (default), and lg.

Small

Medium

Large

<%= render Rvk::InputComponent.new(name: "sm", size: :sm, label: "Small", placeholder: "Small input") %>
<%= render Rvk::InputComponent.new(name: "md", size: :md, label: "Medium", placeholder: "Medium input") %>
<%= render Rvk::InputComponent.new(name: "lg", size: :lg, label: "Large", placeholder: "Large input") %>

With Hint Text

Add helper text below the input.

Username

This will be your public display name.

<%= render Rvk::InputComponent.new(
  name: "username",
  label: "Username",
  hint: "This will be your public display name.",
  placeholder: "johndoe"
) %>

Error State

Display validation errors.

Please enter a valid email address.

<%= render Rvk::InputComponent.new(
  name: "email",
  type: :email,
  label: "Email",
  error: "Please enter a valid email address.",
  value: "invalid-email"
) %>

Required Field

Mark fields as required.

Full Name *

<%= render Rvk::InputComponent.new(
  name: "name",
  label: "Full Name",
  required: true,
  placeholder: "John Doe"
) %>

Floating Label

Material Design style floating labels.

Email address

<%= render Rvk::InputComponent.new(
  name: "floating_email",
  label: "Email address",
  label_style: :floating
) %>

Disabled State

Disabled inputs are non-interactive.

Disabled Input

<%= render Rvk::InputComponent.new(
  name: "disabled",
  label: "Disabled Input",
  disabled: true,
  value: "Cannot edit this"
) %>

Props

Prop	Type	Default	Description
name	String	required	Form field name
type	Symbol	:text	Input type: :text, :email, :password, :number, etc.
label	String	nil	Label text
label_style	Symbol	:stacked	Label style: :stacked or :floating
size	Symbol	:md	Input size: :sm, :md, :lg
hint	String	nil	Helper text below input
error	String	nil	Error message
required	Boolean	false	Mark as required
disabled	Boolean	false	Disable the input