Field

Example

<%= nk_form_for :session do |f| %>
  <%= f.fieldset do |fs| %>
    <%= fs.legend "Sign in" %>
    <%= fs.description "Let's see those credentials, buddy" %>

    <%= f.group do %>
      <%= f.field :email, as: :email, label: "E-mail address" %>
      <%= f.field :password,
              as: :password,
              description: "Probably something like \"password\"" %>
      <%= f.field :remember_me, as: :checkbox, description: "At least for a little bit" %>

      <div class="flex gap-2 items-center">
        <%= f.submit "Sign in" %>
        <div class="text-sm text-muted-foreground">
          or
          <%= link_to "sign up", "", class: "link font-medium" %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>

<%= nk_form_for :session do |f| %>
  <%= f.fieldset do |fs| %>
    <%= fs.legend "Sign in" %>
    <%= fs.description "Let's see those credentials, buddy" %>

    <%= f.group do %>
      <%= f.field :email, as: :email, label: "E-mail address" %>
      <%= f.field :password, as: :password %>
      <%= f.field :remember_me, as: :checkbox,
        description: "At least for a little bit" %>
      <%= f.submit "Sign in" %>
    <% end %>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:component field

Files generated

Composability

If you need more control of a field and its related elements, you can build your own order by passing a block:

<%= nk_form_for :user do |f| %>
  <%= f.field :email, as: :email, label: "E-mail address" do |ff| %>
    <%= ff.label %>
    <%= ff.description %>
    <%= ff.control %>
    <%= ff.errors %>
  <% end %>
<% end %>

Here composed to put a button inline:

E-mail address

We will never send spam... until we're desperate enough

<%= nk_field name: :email, as: "email",
  label: "E-mail address",
  description: "We will never send spam... until we're desperate enough",
  placeholder: "[email protected]" do |f| %>
  <%= f.label %>
  <div
    data-slot="control"
    class="flex items-stretch rounded-md ring-offset-2 has-[input:focus]:ring-2 ring-offset-background"
  >
    <%= f.control class: "flex-1 focus-visible:ring-0 border-r-0 rounded-r-none" %>
    <%= nk_primary_button "Sign up", type: "submit", class: "rounded-l-none flex-none" %>
  </div>
  <%= f.description %>
<% end %>

Usage

`nk_field(**attrs)`
Property	Default	Description
`**attrs`		HTML attributes for `<input>` element

`nk_fieldset(legend: nil, description: nil, **attrs) { \|fieldset\| ... }`
Property	Default	Description
`legend`	`nil`	Plain text content
`description`	`nil`	Plain text content
`**attrs`		HTML attributes for `<fieldset>` element

`fieldset.legend(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<legend>` element

`fieldset.description(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element

`fieldset.group(**attrs) { \|group\| ... }`
Property	Default	Description
`**attrs`		Arguments for `NitroKit::FieldGroup.new()`

`nk_field_group(**attrs)`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element