x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="flex flex-col gap-4 max-w-sm"> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-faf15733" class="text-sm font-medium">Email</label> <input placeholder="you@example.com" id="ui-input-faf15733" 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"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-09bb57ee" class="text-sm font-medium">Password</label> <input placeholder="Enter password" id="ui-input-09bb57ee" 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> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-a2811512" class="text-sm font-medium">Required field<span class="text-destructive ml-0.5"> *</span></label> <input placeholder="Cannot be blank" id="ui-input-a2811512" 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" required="required"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-52bb8f91" class="text-sm font-medium">Required + error<span class="text-destructive ml-0.5"> *</span></label> <input placeholder="Invalid value" id="ui-input-52bb8f91" 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" required="required" aria-invalid="true"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-bf2144a1" class="text-sm font-medium text-muted-foreground cursor-not-allowed">Disabled</label> <input placeholder="Locked" id="ui-input-bf2144a1" 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"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-266a7db8" class="text-sm font-medium">Small label</label> <input placeholder="Small" id="ui-input-266a7db8" 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"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-a253fded" class="text-base font-medium">Large label</label> <input placeholder="Large" id="ui-input-a253fded" 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"> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-a531bb83" class="text-sm font-semibold">Semibold label</label> <input placeholder="Bolder label" id="ui-input-a531bb83" 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"> </div></div>1
2
3
4
5
6
7
8
9
10
<div class="flex flex-col gap-4 max-w-sm"> <%= render(UI::Input.new(label: "Email", placeholder: "you@example.com")) %> <%= render(UI::Input.new(label: "Password", type: :password, placeholder: "Enter password")) %> <%= render(UI::Input.new(label: "Required field", required: true, placeholder: "Cannot be blank")) %> <%= render(UI::Input.new(label: "Required + error", required: true, error: true, variant: :error, placeholder: "Invalid value")) %> <%= render(UI::Input.new(label: "Disabled", disabled: true, placeholder: "Locked")) %> <%= render(UI::Input.new(label: "Small label", label_size: :sm, placeholder: "Small")) %> <%= render(UI::Input.new(label: "Large label", label_size: :lg, placeholder: "Large")) %> <%= render(UI::Input.new(label: "Semibold label", label_weight: :semibold, placeholder: "Bolder label")) %></div>No notes provided.
No params configured.