Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Forms.input

Server-rendered

Renders an input with shadcn classes.

Text input 

  <.input id="email" type="email" placeholder="name@example.com" />

With value 

  <.input id="username" name="username" value="levi" />

With FormField

Phoenix shim 
  <.input field={@form[:email]} />

With label

Phoenix shim 
  <.input field={@form[:email]} label="Email" />

With explicit errors

Phoenix shim

can't be blank

  <.input field={@form[:email]} label="Email" errors={["can't be blank"]} />

Inside field composition

Phoenix shim

We'll send alerts here.

  <.field>
  <:label for={@form[:email].id}>Email</:label>
  <.input field={@form[:email]} />
  <:description>We'll send alerts here.</:description>
</.field>

Attributes

Name Type Default Values Global Includes
class :string — — —
errors :list — — —
field {:struct, Phoenix.HTML.FormField} — — —
id :string — — —
label :string — — —
name :string — — —
placeholder :string — — —
rest :global — — accept , autocomplete , disabled , max , maxlength , min , minlength , pattern , readonly , required , step
type :string "text" — —
value :string — — —

Slots

No slots declared.