Password

Password components are Input Fields that allow the user to enter hidden string chains, commonly used for sensitive information.

Programmatic

password.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'password',
      path: 'password',
      label: 'Password',
    },
  ],
});

JSON

password.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "password",
      "path": "password",
      "label": "Password"
    }
  ]
}

Props

Use these props to customize your Password component.

prop	type	description
placeholder	string	A placeholder text to display when the password input has no value
hint	string	A description to display below the password input
icon	string	A css class to display an icon inside the input
showPasswordIcon	string	Icon indicating the state to show the password (e.g. eye icon)
hidePasswordIcon	string	Icon indicating the state to hide the password (e.g. eye-slash icon)
showPasswordLabel	string	Label text for the show password toggle, visible if no icon is set
hidePasswordLabel	string	Label text for the hide password toggle, visible if no icon is set
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Placeholder

Use the property placeholder to add a placeholder.

Programmatic

password.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'password',
      path: 'password',
      label: 'Password',
      props: {
        placeholder: 'Enter your secure password',
      },
    },
  ],
});

JSON

password.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "password",
      "path": "password",
      "label": "Password",
      "props": {
        "placeholder": "Enter your secure password"
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

password.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'password',
      path: 'password',
      label: 'Password',
      props: {
        hint: 'Must be at least 8 characters long.',
      },
    },
  ],
});

JSON

password.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "password",
      "path": "password",
      "label": "Password",
      "props": {
        "hint": "Must be at least 8 characters long."
      }
    }
  ]
}

Icon

Use the property icon to add an icon to the password. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed on the left by default. The component also has built-in icons and labels to toggle password visibility.

Programmatic

password.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'password',
      path: 'password',
      label: 'Password',
      props: {
        icon: 'fas fa-lock',
      },
    },
  ],
});

JSON

password.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "password",
      "path": "password",
      "label": "Password",
      "props": {
        "icon": "fas fa-lock"
      }
    }
  ]
}

Styling

Passwords can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-gap--inner	Label gap and margin bottom
--gui-padding	Input padding
--gui-color-border	Input border color
--gui-radius	Input radius
--gui-color-bg	Input background color
--gui-color-fg	Input text color
--gui-color-primary	Input border color and outline on focus
--gui-color-error	Input border color when invalid
--gui-space-gap	Icon left padding
--gui-icon-space-gap	Icon right padding
--gui-font-size--small	Hint font size
--gui-color-fg--secondary	Hint font color
--gui-text-default	Eye icon toggle color

Anatomy

This is the anatomy of the Password Component in case you want to use your CSS styles.

password-anatomy.html

<gui-password>
  <label for="fieldUid">
    Label
    <div class="gui-password__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <input
      type="password"
      id="fieldUid"
      class="gui-password--icon"
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />
    <span class="gui-password__icon"></span>
    <button
      class="gui-password__toggle fas fa-eye"
      type="button"
      tabindex="-1"
    >
      <span>Show</span>
    </button>
  </div>
</gui-password>