PasswordInput

The PasswordInput component provides a button that toggles whether the password is visible. The ability to see your password in plain text as you're typing often improves usability.
Consider using RFUI's FormField component with type="rfui-password-input" instead. If not, you'll probably want to use <label> along with PasswordInput.
Source code
import { PasswordInput } from "rfui";

#Basic

<PasswordInput />

#Controlled

See Controlled & Uncontrolled Components. Passing value and onInput work because of ...rest.
<PasswordInput value={value} onInput={onInput} />

#Default visible

Set defaultVisibility to "shown". Defaults to "hidden".
Consider the factors at play here, including:
  1. Usability: Seeing * as you type instead of characters like "a" and "b" can hurt usability.
  2. Actual security: In public places, ***** can prevent malicious onlookers from stealing your password.
  3. Perceived security: Some users expect to see * as they type their password and might question how secure your website is if they see their password in plaintext by default instead.
Related reading:
<PasswordInput defaultVisibility="shown" />

#Size

Set size to "sm", "md", or "lg". Defaults to "md".
<Stack class="gap-5">
  <PasswordInput size="sm" />
  <PasswordInput size="md" />
  <PasswordInput size="lg" />
</Stack>

#Rounded

Set rounded to "square", "sm", "lg", or "full". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
<Stack class="gap-5">
  <PasswordInput rounded="square" />
  <PasswordInput rounded="sm" />
  <PasswordInput rounded="lg" />
  <PasswordInput rounded="full" />
</Stack>

#Invalid

Set invalid to true or false. Defaults to false.
<PasswordInput invalid />

#Props

PropRequiredDefaultType and notes
defaultVisibility-"hidden"
"hidden" | "shown"
Whether the password is displayed with asterisks (like this: ******) or in plain text (like this: foobar).
Consider the factors at play here, including:
  1. Usability: Seeing * as you type instead of characters like "a" and "b" can hurt usability.
  2. Actual security: In public places, ***** can prevent malicious onlookers from stealing your password.
  3. Perceived security: Some users expect to see * as they type their password and might question how secure your website is if they see their password in plaintext by default instead.
Related reading:
containerProps--
Omit<ComponentProps<"div">, "size">
The structure of PasswordInput is something like this:
<Flex>
  <Input />
  <button></button>
</Flex>
containerProps will get passed to Flex like this:
<Flex {...containerProps}>
...rest--
{
  size?: "sm" | "md" | "lg";
  rounded?: "square" | "sm" | "lg" | "full";
  invalid?: boolean;
} & Omit<ComponentProps<"input">, "size">
The structure of PasswordInput is something like this:
<Flex>
  <Input />
  <button></button>
</Flex>
...rest will get passed to <Input /> like this:
<Input {...rest} />