'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputBasic = () => {
return <PinInput />
}
import { PinInput } from '@saas-ui/react/pin-input'<PinInput />Use the size prop to change the size of the pin input component.
'use client'
import { Stack } from '@chakra-ui/react'
import { PinInput } from '@saas-ui/react'
export const PinInputWithSizes = () => {
return (
<Stack gap="4">
<PinInput size="sm" />
<PinInput size="md" />
<PinInput size="lg" />
</Stack>
)
}
Use the otp prop to make the pin input component behave like a one-time code
input. This helps improve the user experience when entering OTP codes.
'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputWithOtp = () => {
return <PinInput otp />
}
Use the mask prop to obscure the entered pin code.
'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputWithMask = () => {
return <PinInput mask />
}
Use the placeholder prop to add a placeholder to the pin input component.
'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputWithPlaceholder = () => {
return <PinInput placeholder="🥳" />
}
Here's an example of how to compose the Field and the PinInput components
'use client'
import { Field } from '@saas-ui/react'
import { PinInput } from '@saas-ui/react'
export const PinInputWithField = () => {
return (
<Field.Root>
<Field.Label>Enter otp</Field.Label>
<PinInput />
</Field.Root>
)
}
Use the value and onValueChange props to control the value of the pin input
'use client'
import { useState } from 'react'
import { PinInput } from '@saas-ui/react'
export const PinInputControlled = () => {
const [value, setValue] = useState(['', '', '', ''])
return <PinInput value={value} onValueChange={(e) => setValue(e.value)} />
}
Use the attached prop to attach the pin input to the input field
'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputAttached = () => {
return <PinInput attached />
}
Use the type prop to allow the user to enter alphanumeric characters. Values
can be either alphanumeric, numeric, or alphabetic
'use client'
import { PinInput } from '@saas-ui/react'
export const PinInputAlphanumeric = () => {
return <PinInput type="alphanumeric" />
}
| Prop | Default | Type |
|---|---|---|
placeholder | '\'â—‹\'' | stringThe placeholder text for the input |
type | '\'numeric\'' | 'numeric' | 'alphabetic' | 'alphanumeric'The type of value the pin-input should allow |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'lg' | 'md' | 'sm' | 'xs'The size of the component |
variant | 'outline' | 'outline' | 'filled' | 'flushed'The variant of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
autoFocus | booleanWhether to auto-focus the first input. | |
blurOnComplete | booleanWhether to blur the input when the value is complete | |
defaultValue | string[]The initial value of the pin input when it is first rendered. Use when you do not need to control the state of the pin input | |
disabled | booleanWhether the inputs are disabled | |
form | stringThe associate form of the underlying input element. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{
root: string
hiddenInput: string
label: string
control: string
input(id: string): string
}>The ids of the elements in the pin input. Useful for composition. | |
invalid | booleanWhether the pin input is in the invalid state | |
mask | booleanIf `true`, the input's value will be masked just like `type=password` | |
name | stringThe name of the input element. Useful for form submission. | |
onValueChange | (details: ValueChangeDetails) => voidFunction called on input change | |
onValueComplete | (details: ValueChangeDetails) => voidFunction called when all inputs have valid values | |
onValueInvalid | (details: ValueInvalidDetails) => voidFunction called when an invalid value is entered | |
otp | booleanIf `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`. | |
pattern | stringThe regular expression that the user-entered input value is checked against. | |
readOnly | booleanWhether the pin input is in the valid state | |
required | booleanWhether the pin input is required | |
selectOnFocus | booleanWhether to select input value when input is focused | |
translations | IntlTranslationsSpecifies the localized strings that identifies the accessibility elements and their states | |
value | string[]The value of the the pin input. |