# VelvetKit

## Input (`UI::Input`)

A text field with label, hint and error message, standalone or with a form builder.

Add it: `bin/rails generate velvetkit:add input`

Also adds: `label`, `form_field`

### Arguments

```ruby
UI::Input.new(type: :text, size: :default, variant: :default, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, form: nil, field: nil, class: nil, **html_attrs)
```

### Example: All Sizes

```erb
<div class="flex flex-col gap-3 max-w-sm">
  <%= render(UI::Input.new(size: :sm, placeholder: "Small (sm)")) %>
  <%= render(UI::Input.new(size: :default, placeholder: "Default")) %>
  <%= render(UI::Input.new(size: :lg, placeholder: "Large (lg)")) %>
</div>
```

### Example: States

```erb
<div class="flex flex-col gap-3 max-w-sm">
  <%= render(UI::Input.new(placeholder: "Default")) %>
  <%= render(UI::Input.new(placeholder: "With value", value: "hello@example.com")) %>
  <%= render(UI::Input.new(placeholder: "Error state", variant: :error, error: true)) %>
  <%= render(UI::Input.new(placeholder: "Disabled", disabled: true)) %>
  <%= render(UI::Input.new(type: :password, placeholder: "Password")) %>
</div>
```

### Example: With Labels

```erb
<div class="flex flex-col gap-4 max-w-sm">
  <%= render(UI::Input.new(label: "Email", placeholder: "you@example.com")) %>
  <%= render(UI::Input.new(label: "Password", type: :password, placeholder: "Enter password")) %>
  <%= render(UI::Input.new(label: "Required field", required: true, placeholder: "Cannot be blank")) %>
  <%= render(UI::Input.new(label: "Required + error", required: true, error: true, variant: :error, placeholder: "Invalid value")) %>
  <%= render(UI::Input.new(label: "Disabled", disabled: true, placeholder: "Locked")) %>
  <%= render(UI::Input.new(label: "Small label", label_size: :sm, placeholder: "Small")) %>
  <%= render(UI::Input.new(label: "Large label", label_size: :lg, placeholder: "Large")) %>
  <%= render(UI::Input.new(label: "Semibold label", label_weight: :semibold, placeholder: "Bolder label")) %>
</div>
```

### Example: Hint and Error

```erb
<div class="flex flex-col gap-6 max-w-sm">
  <%= render(UI::Input.new(label: "Email", type: :email, hint: "We'll only use it to send receipts.")) %>
  <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %>
</div>
```