# VelvetKit

## Label (`UI::Label`)

A form label with a required marker.

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

### Arguments

```ruby
UI::Label.new(size: :default, weight: :medium, required: false, disabled: false, for: nil, class: nil, **html_attrs)
```

### Example: All Sizes

```erb
<div class="flex flex-col gap-3">
  <%= render(UI::Label.new(size: :xs)) { "Extra Small (xs)" } %>
  <%= render(UI::Label.new(size: :sm)) { "Small (sm)" } %>
  <%= render(UI::Label.new(size: :default)) { "Default (sm)" } %>
  <%= render(UI::Label.new(size: :lg)) { "Large (base)" } %>
</div>
```

### Example: All Weights

```erb
<div class="flex flex-col gap-3">
  <%= render(UI::Label.new(weight: :normal)) { "Normal weight" } %>
  <%= render(UI::Label.new(weight: :medium)) { "Medium weight (default)" } %>
  <%= render(UI::Label.new(weight: :semibold)) { "Semibold weight" } %>
</div>
```

### Example: States

```erb
<div class="flex flex-col gap-3">
  <%= render(UI::Label.new) { "Default" } %>
  <%= render(UI::Label.new(required: true)) { "Required field" } %>
  <%= render(UI::Label.new(disabled: true)) { "Disabled" } %>
  <%= render(UI::Label.new(for: "email")) { "With for attribute" } %>
</div>
```