Skip to content

Conversation

@AtmoFX
Copy link
Contributor

@AtmoFX AtmoFX commented Jul 13, 2025

This is the implementation of the improvements for password fields mentioned in #950.

This PR supercedes #942 that was created concurrently, as it contains more than just addressing the mandatory tab-stop on password fields. Kudos to @themegazord for having the same idea as me (hence an obviously good one 😆) at the same time.

Among the other changes implemented, this aligns passwords with the styling logic of #920.
As a result, while it allows styling the fields in pretty much any desired way, at least AFAICT, it has the same small downsides as inputs (e.g. having to use !important classes for the border of the disabled fields) and both inputs and passwords will need to be aligned to whatever behavior @robsontenorio wants in the future.


The code:

<div class="grid grid-cols-[1fr_2fr_2fr_2fr] gap-2 items-baseline">

    <span></span>
    <span>Only password</span>
    <span>Left toggle</span>
    <span>Right toggle</span>

    <span>Normal</span>
    <x-password label="Test 1" only-password />
    <x-password label="Test 2" />
    <x-password label="Test 3" right />

    <span>No tab stop on toggle</span>
    <x-password label="Test 4" no-tab-stop only-password />
    <x-password label="Test 5" no-tab-stop />
    <x-password label="Test 6" no-tab-stop right />

    <span>Restyled</span>
    <x-password class="border-info" label="Test 7" only-password />
    <x-password class="border-info" label="Test 8" />
    <x-password class="border-info" label="Test 9" right />
    
    <span>Disabled</span>
    <x-password label="Test 10" disabled only-password />
    <x-password label="Test 11" disabled/>
    <x-password label="Test 12" disabled right />

    <span>Disabled, restyled</span>
    <x-password class="!border-1 !border-info" label="Test 13" disabled only-password />
    <x-password class="!border-1 !border-info" label="Test 14" disabled/>
    <x-password class="!border-1 !border-info" label="Test 15" disabled right />

</div>

results in:
image

Remember to change the focus on password fields by pressing tab, as this is very much included in the PR but does not render in a simple screenshot.

@AtmoFX AtmoFX closed this Jul 13, 2025
@AtmoFX AtmoFX deleted the password-improvements branch July 13, 2025 13:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant