x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex flex-col gap-6 max-w-sm"> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-dab8f5b6" class="text-sm font-medium">Email</label> <input id="ui-input-dab8f5b6" type="email" 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" aria-describedby="ui-input-dab8f5b6-hint"> <p id="ui-input-dab8f5b6-hint" class="text-xs text-muted-foreground">We'll only use it to send receipts.</p> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-8c45274f" class="text-sm font-medium">Username</label> <input value="a" id="ui-input-8c45274f" 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" aria-describedby="ui-input-8c45274f-error"> <p id="ui-input-8c45274f-error" class="text-xs text-destructive">Use at least 3 characters.</p> </div></div>1
2
3
4
<div class="flex flex-col gap-6 max-w-sm"> <%= render(UI::Input.new(label: "Email", type: :email, hint: "We'll only use it to send receipts.")) %> <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %></div>No notes provided.
No params configured.