Label
UI::LabelA form label with a required marker.
# 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>
```
bin/rails generate velvetkit:add label- Also adds
- Nothing else
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
All Sizes
sizes.html.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>All Weights
weights.html.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>States
states.html.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>API
Arguments
UI::Label.new(size: :default, weight: :medium, required: false, disabled: false, for: nil, class: nil, **html_attrs)