LycanUI
Input
An input field compatible with all the Rails
field helpers
.
<div class="flex flex-col gap-1">
<%= ui.label :object, :field, 'Name' %>
<%= ui.input :object, :field, placeholder: 'Type here' %>
</div>
Installation
rails g lycan_ui:add input
Usage
Usage in forms
To use directly with the typical Rails form helpers, Installing form helpers
<%= lycan_ui_form_with do |form| %>
<div class="flex flex-col gap-1">
<%= form.label :field, 'Name', for: :field %>
<%= form.text_field :field, placeholder: 'Type here', id: :field %>
</div>
<% end %>
Date
Pass in type to ui.input with a value of date.
<div class="flex flex-col gap-1">
<%= ui.label :date, :field, 'Date' %>
<%= ui.input :date, :field, type: :date, placeholder: 'Type here' %>
</div>
Datetime
Pass in type to ui.input with a value of datetime.
<div class="flex flex-col gap-1">
<%= ui.label :datetime, :field, 'Datetime' %>
<%= ui.input :datetime, :field, type: :datetime, placeholder: 'Type here' %>
</div>
Pass in type to ui.input with a value of email.
<div class="flex flex-col gap-1">
<%= ui.label :email, :field, 'Email' %>
<%= ui.input :email, :field, type: :email, placeholder: 'Type here' %>
</div>
Month
Pass in type to ui.input with a value of month.
<div class="flex flex-col gap-1">
<%= ui.label :month, :field, 'Month' %>
<%= ui.input :month, :field, type: :month, placeholder: 'Type here' %>
</div>
Number
Pass in type to ui.input with a value of number.
<div class="flex flex-col gap-1">
<%= ui.label :number, :field, 'Number' %>
<%= ui.input :number, :field, type: :number, placeholder: 'Type here' %>
</div>
Password
Pass in type to ui.input with a value of password.
<div class="flex flex-col gap-1">
<%= ui.label :password, :field, 'Password' %>
<%= ui.input :password, :field, type: :password, placeholder: 'Type here' %>
</div>
Search
Pass in type to ui.input with a value of search.
<div class="flex flex-col gap-1">
<%= ui.label :search, :field, 'Search' %>
<%= ui.input :search, :field, type: :search, placeholder: 'Type here' %>
</div>
Phone
Pass in type to ui.input with a value of phone.
<div class="flex flex-col gap-1">
<%= ui.label :phone, :field, 'Phone Number' %>
<%= ui.input :phone, :field, type: :phone, placeholder: 'Type here' %>
</div>
Url
Pass in type to ui.input with a value of url.
<div class="flex flex-col gap-1">
<%= ui.label :url, :field, 'URL' %>
<%= ui.input :url, :field, type: :url, placeholder: 'Type here' %>
</div>
Week
Pass in type to ui.input with a value of week.
<div class="flex flex-col gap-1">
<%= ui.label :week, :field, 'Week' %>
<%= ui.input :week, :field, type: :week, placeholder: 'Type here' %>
</div>