Pillar UI React InputPassword Component documentation
The InputPassword component is a password input field that hides the text that is being entered. This is useful for entering passwords, as it prevents other people from seeing what you are typing.
Components:
Type
import
import { Pillar UI React InputPassword Component } from '@pillar-ui/core'
props
Filled
A filled input is a type of input field that has a background color. This makes it easy for users to see where they are typing and to distinguish between input fields.
export const FilledInput = () => {
return (
<Flex gap="sm" direction="column">
<Input aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
<Input aria-label="hello" placeholder="Normal" variant="filled" />
<Input aria-label="hello" disabled placeholder="Disabled" variant="filled" />
<Input aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
<Input aria-label="hello" isInvalid placeholder="Error" variant="filled" />
<Input aria-label="hello" suffixInput={<User width="16" />} placeholder="Error" variant="filled" />
<Input aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" variant="filled" />
<Input
aria-label="hello"
prefixInput={'https://'}
suffixInput=".com"
defaultValue="Default Value"
variant="filled"
/>
</Flex>
)
}
Outline
The outline variant of the input component is a type of input field that has a border around it. This makes it easy for users to see where they are typing and to distinguish between input fields.
export const OutlineInput = () => {
return (
<Flex gap="sm" direction="column">
<Input variant="outline" aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
<Input variant="outline" aria-label="hello" placeholder="Normal" variant="filled" />
<Input variant="outline" aria-label="hello" disabled placeholder="Disabled" variant="filled" />
<Input variant="outline" aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
<Input variant="outline" aria-label="hello" isInvalid placeholder="Error" variant="filled" />
<Input
variant="outline"
aria-label="hello"
suffixInput={<User width="16" />}
placeholder="Error"
variant="filled"
/>
<Input
variant="outline"
aria-label="hello"
prefixInput={<User width="16" />}
placeholder="Placeholder"
variant="filled"
/>
<Input
variant="outline"
aria-label="hello"
prefixInput={'https://'}
suffixInput=".com"
defaultValue="Default Value"
variant="filled"
/>
</Flex>
)
}
Bordered
The bordered variant of the input component is a type of input field that has a bottom border that visually separates the input from others and shows the edge of the input.
export const OutlineInput = () => {
return (
<Flex gap="sm" direction="column">
<Input variant="bordered" aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
<Input variant="bordered" aria-label="hello" placeholder="Normal" variant="filled" />
<Input variant="bordered" aria-label="hello" disabled placeholder="Disabled" variant="filled" />
<Input variant="bordered" aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
<Input variant="bordered" aria-label="hello" isInvalid placeholder="Error" variant="filled" />
<Input
variant="bordered"
aria-label="hello"
suffixInput={<User width="16" />}
placeholder="Error"
variant="filled"
/>
<Input
variant="bordered"
aria-label="hello"
prefixInput={<User width="16" />}
placeholder="Placeholder"
variant="filled"
/>
<Input
variant="bordered"
aria-label="hello"
prefixInput={'https://'}
suffixInput=".com"
defaultValue="Default Value"
variant="filled"
/>
</Flex>
)
}
Corner
The corner prop is a prop that can be used to customize the corner radius of the Input component. Valid values for the corner prop are: sharp
| xs
| sm
| md
| lg
| xl
| full
export const CornerInput = () => {
return (
<Flex gap="sm" direction="column">
<Input corner="sharp" placeholder="sharp" />
<Input corner="xs" placeholder="xs" />
<Input corner="sm" placeholder="sm" />
<Input corner="md" placeholder="md" />
<Input corner="lg" placeholder="lg" />
<Input corner="xl" placeholder="xl" />
<Input corner="full" placeholder="full" />
</Flex>
)
}
Color
- Type: string
- Default:
primary
- Options:
danger
|warning
|success
|primary
|secondary
|bgce
|primary
|secondary
The color prop can be used to customize the color of the input's border when it is focused. Valid values for the color prop are: primary
| purple
| secondary
| brown
| bgce
export const ColorInput = () => {
return (
<Flex gap="sm" direction="column">
<Input color="pri" variant="bordered" autoFocus placeholder="Focus" />
<Input color="war" variant="bordered" autoFocus placeholder="Normal" />
<Input color="sec" variant="outline" autoFocus placeholder="Disabled" />
<Input color="bgce" variant="filled" autoFocus placeholder="isInvalid" />
<Input color="suc" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
<Input
color="dan"
variant="bordered"
autoFocus
prefixInput={'https://'}
suffixInput=".com"
defaultValue="Default Value"
/>
</Flex>
)
}
Size
- Type: string
- Default:
md
- Options:
2xs
|xs
|sm
|md
|lg
|xl
|2xl
The size prop of the input component is used to change the size of the input field. The default size is medium md
. The following values are supported: sm
,lg
import { Flex, Input } from '@pillar-ui/core'
export const SizeInput = () => {
return (
<Flex gap="sm" direction="column">
<Input size="sm" placeholder="Small(sm)" />
<Input placeholder="Medium (md default You don't need it)" />
<Input size="lg" placeholder="Large(lg)" />
</Flex>
)
}
Custom Icon
The visibleIcon prop is used to set the icon that is displayed when text is shown, and the hideIcon prop is used to set the icon that is displayed when text is hidden.
Example
export const InputPasswordCustomIcon = () => {
return (
<Flex gap="sm" direction="column">
<InputPassword placeholder="enter your password" color="pri" visibleIcon={<Lock />} hiddenIcon={<LockOff />} />
<InputPassword
placeholder="enter your password"
color="war"
visibleIcon={<OpenSource />}
hiddenIcon={<Close />}
/>
</Flex>
)
}
Best Practice
- Use clear and concise labels. The label should be descriptive and accurate, and it should clearly indicate what information is being requested to add label to the input Please wrap it within a FormField Component.
- Use placeholder text. The placeholder text should provide a hint to the user about what information is expected.
- Use a consistent style for all input fields. This will help to create a more visually appealing and user-friendly interface. Choose only one variant and use it consistently throughout your site. Do not mix variants within the same site.
- Validate the input data on both the client and server side. This will help to ensure that the user enters the correct information and provide a good user experience.
- Provide feedback to the user about the validity of their input data. Use FormController to send error messages to the component, which will then display them to the user.
- If your input field needs more information, use the hint prop to provide that information to the user. This will help the user to understand what information is expected and to enter the correct information.
Troubleshooting
If you encounter any issues with the Input component, make sure that you have correctly passed the props and values. If you are still having issues, check the console for any error messages.
Conclusion
The Input component is a versatile UI component that can be used to collect user input. It is flexible, customizable, and accessible, making it a great addition to any UI design.