Input
Displays a form input field or a component that looks like an input field.
Usage
div(class: 'grid w-full max-w-sm items-center gap-1.5') do Input(type: "email", placeholder: "Email") end
Copied!
Copy failed!
File
div(class: "grid w-full max-w-sm items-center gap-1.5") do label(for: "picture") { "Picture" } Input(type: "file", id: "picture") end
Copied!
Copy failed!
Disabled
div(class: 'grid w-full max-w-sm items-center gap-1.5') do Input(disabled: true, type: "email", placeholder: "Email") end
Copied!
Copy failed!
With label
div(class: 'grid w-full max-w-sm items-center gap-1.5') do label(for: "email1") { "Email" } Input(type: "email", placeholder: "Email", id: "email1") end
Copied!
Copy failed!
With button
div(class: 'flex w-full max-w-sm items-center space-x-2') do Input(type: "email", placeholder: "Email") Button { "Subscribe" } end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Input
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Input
to app/components/ruby_ui/input.rb
# frozen_string_literal: true module RubyUI class Input < Base def initialize(type: :string, **attrs) @type = type.to_sym super(**attrs) end def view_template input(type: @type, **attrs) end private def default_attrs { data: { ruby_ui__form_field_target: "input", action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid" }, class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground" } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Input | Phlex |