Label

Quick Start

<%= kui(:label, for: "email") { "Email address" } %>

Locals

Usage

Label is typically used inside a Field rather than standalone:

<%= kui(:field) do %>
  <%= kui(:field, :label) { "Name" } %>
  <%= kui(:input, name: "name") %>
<% end %>

For standalone use, pass for: to associate with a form control:

<%= kui(:label, for: "email") { "Email address" } %>
<%= kui(:input, id: "email", name: "email") %>

Disabled State

Label automatically dims when its associated control is disabled, using peer-disabled and group-data-[disabled] selectors.

Theme

Kiso::Themes::Label = ClassVariants.build(
  base: "flex items-center gap-2 text-sm leading-none font-medium select-none " \
        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 " \
        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
)

Accessibility