Label

<%= render "ui/label", for: "email" do %>Your email address<% end %>

<%= render UI::Label.new(for: "email") { "Your email address" } %>

<%= render(UI::LabelComponent.new(for: "email")) { "Your email address" } %>

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render "ui/label", for: "email-input" do %>Email<% end %>
  <%= render "ui/input", type: "email", id: "email-input", placeholder: "Email" %>
</div>

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render UI::Label.new(for: "email-input") { "Email" } %>
  <%= render UI::Input.new(type: "email", id: "email-input", placeholder: "Email") %>
</div>

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render(UI::LabelComponent.new(for: "email-input")) { "Email" } %>
  <%= render UI::InputComponent.new(type: "email", id: "email-input", placeholder: "Email") %>
</div>

<div class="flex items-center space-x-2">
  <%= render "ui/checkbox", id: "terms" %>
  <%= render "ui/label", for: "terms" do %>Accept terms and conditions<% end %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::Checkbox.new(id: "terms") %>
  <%= render UI::Label.new(for: "terms") { "Accept terms and conditions" } %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::CheckboxComponent.new(id: "terms") %>
  <%= render(UI::LabelComponent.new(for: "terms")) { "Accept terms and conditions" } %>
</div>