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 to wrap it. If not, you'll probably want to use <label> along with PasswordInput.
Source code
import { PasswordInput } from "rfui-package";

#Basic

<PasswordInput />

#Controlled

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

#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 className="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 className="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} />