x
1
2
3
4
5
6
7
<div class="flex flex-col gap-3 max-w-sm"> <input placeholder="Default" type="text" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm"> <input placeholder="With value" value="hello@example.com" type="text" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm"> <input placeholder="Error state" type="text" class="flex w-full rounded-md border bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm border-destructive focus:ring-destructive" aria-invalid="true"> <input placeholder="Disabled" type="text" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm" disabled="disabled"> <input placeholder="Password" type="password" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm"></div>1
2
3
4
5
6
7
<div class="flex flex-col gap-3 max-w-sm"> <%= render(UI::Input.new(placeholder: "Default")) %> <%= render(UI::Input.new(placeholder: "With value", value: "hello@example.com")) %> <%= render(UI::Input.new(placeholder: "Error state", variant: :error, error: true)) %> <%= render(UI::Input.new(placeholder: "Disabled", disabled: true)) %> <%= render(UI::Input.new(type: :password, placeholder: "Password")) %></div>No notes provided.
No params configured.