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
35
36
37
38
39
40
41
42
43
44
45
46
<div class="flex max-w-sm flex-col gap-6"> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Default</span> <div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center rounded-md border border-input bg-background transition-all h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot]:focus]:ring-2 has-[[data-slot]:focus]:ring-primary has-[[data-slot]:focus]:ring-offset-1 ring-offset-background has-[[data-slot][aria-invalid=true]:enabled]:border-destructive has-[[data-slot][aria-invalid=true]:enabled]:ring-destructive has-[input:disabled]:border-input has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50" data-controller="ui--password-visibility"> <div role="group" data-slot="input-group-addon" data-align="inline-end" class="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > <button type="button" class="justify-center whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-primary ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! py-2 disabled:cursor-not-allowed text-sm flex items-center h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-offset-1" aria-label="Show password" aria-pressed="false" data-action="ui--password-visibility#toggle" data-ui--password-visibility-target="toggle"><span class="inline-flex" data-ui--password-visibility-target="iconShow"><i data-lucide="eye" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><i data-lucide="eye-off" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span></button> </div> <input id="ui-password-aaa667ad" data-ui--password-visibility-target="input" data-slot="input-group-control" name="password_default" placeholder="Enter your password" type="password" class="flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground placeholder:text-muted-foreground border-0! bg-transparent shadow-none! outline-none! focus:outline-none! focus:outline-none! focus:ring-0! dark:bg-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50"> </div> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Required</span> <div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center rounded-md border border-input bg-background transition-all h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot]:focus]:ring-2 has-[[data-slot]:focus]:ring-primary has-[[data-slot]:focus]:ring-offset-1 ring-offset-background has-[[data-slot][aria-invalid=true]:enabled]:border-destructive has-[[data-slot][aria-invalid=true]:enabled]:ring-destructive has-[input:disabled]:border-input has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50" data-controller="ui--password-visibility"> <div role="group" data-slot="input-group-addon" data-align="inline-end" class="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > <button type="button" class="justify-center whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-primary ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! py-2 disabled:cursor-not-allowed text-sm flex items-center h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-offset-1" aria-label="Show password" aria-pressed="false" data-action="ui--password-visibility#toggle" data-ui--password-visibility-target="toggle"><span class="inline-flex" data-ui--password-visibility-target="iconShow"><i data-lucide="eye" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><i data-lucide="eye-off" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span></button> </div> <input id="ui-password-35bea75f" data-ui--password-visibility-target="input" data-slot="input-group-control" name="password_required" type="password" class="flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground placeholder:text-muted-foreground border-0! bg-transparent shadow-none! outline-none! focus:outline-none! focus:outline-none! focus:ring-0! dark:bg-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50" required="required"> </div> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Error</span> <div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center rounded-md border border-input bg-background transition-all h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot]:focus]:ring-2 has-[[data-slot]:focus]:ring-primary has-[[data-slot]:focus]:ring-offset-1 ring-offset-background has-[[data-slot][aria-invalid=true]:enabled]:border-destructive has-[[data-slot][aria-invalid=true]:enabled]:ring-destructive has-[input:disabled]:border-input has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50" data-controller="ui--password-visibility"> <div role="group" data-slot="input-group-addon" data-align="inline-end" class="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > <button type="button" class="justify-center whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-primary ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! py-2 disabled:cursor-not-allowed text-sm flex items-center h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-offset-1" aria-label="Show password" aria-pressed="false" data-action="ui--password-visibility#toggle" data-ui--password-visibility-target="toggle"><span class="inline-flex" data-ui--password-visibility-target="iconShow"><i data-lucide="eye" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><i data-lucide="eye-off" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span></button> </div> <input id="ui-password-279b146f" data-ui--password-visibility-target="input" data-slot="input-group-control" name="password_error" type="password" class="flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground placeholder:text-muted-foreground border-0! bg-transparent shadow-none! outline-none! focus:outline-none! focus:outline-none! focus:ring-0! dark:bg-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50" aria-invalid="true"> </div> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Disabled</span> <div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center rounded-md border border-input bg-background transition-all h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot]:focus]:ring-2 has-[[data-slot]:focus]:ring-primary has-[[data-slot]:focus]:ring-offset-1 ring-offset-background has-[[data-slot][aria-invalid=true]:enabled]:border-destructive has-[[data-slot][aria-invalid=true]:enabled]:ring-destructive has-[input:disabled]:border-input has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50" data-controller="ui--password-visibility"> <div role="group" data-slot="input-group-addon" data-align="inline-end" class="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > <button type="button" class="justify-center whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-primary ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! py-2 disabled:cursor-not-allowed text-sm flex items-center h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-offset-1" disabled="disabled" aria-label="Show password" aria-pressed="false" data-action="ui--password-visibility#toggle" data-ui--password-visibility-target="toggle"><span class="inline-flex" data-ui--password-visibility-target="iconShow"><i data-lucide="eye" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><i data-lucide="eye-off" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span></button> </div> <input id="ui-password-453e8fc2" data-ui--password-visibility-target="input" data-slot="input-group-control" name="password_disabled" type="password" class="flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground placeholder:text-muted-foreground border-0! bg-transparent shadow-none! outline-none! focus:outline-none! focus:outline-none! focus:ring-0! dark:bg-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50" disabled="disabled"> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%# Click the eye to toggle masking — driven by the ui--password-visibility controller. %><div class="flex max-w-sm flex-col gap-6"> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Default</span> <%= render(UI::PasswordInput.new(name: "password_default", placeholder: "Enter your password")) %> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Required</span> <%= render(UI::PasswordInput.new(name: "password_required", required: true)) %> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Error</span> <%= render(UI::PasswordInput.new(name: "password_error", error: true)) %> </div> <div class="flex flex-col gap-2"> <span class="text-xs text-muted-foreground">Disabled</span> <%= render(UI::PasswordInput.new(name: "password_disabled", disabled: true)) %> </div></div>No notes provided.
No params configured.