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!
Components
| Component | Built using | Source |
|---|---|---|
Button | Phlex | |
Input | Phlex |
| Component | Built using | Source |
|---|---|---|
Input | Phlex |