Ana içeriğe geç

Password Input

Secure password input with show/hide toggle functionality.

Features​

  • 🔒 Secure text entry
  • 👁️ Show/hide toggle
  • 🔤 Accepts text by default, numeric-only opt-in
  • 🔐 Auto-complete support

Basic Usage​

import {Input} from '@tansuk/rott-ui'

<Input
  name='password'
  type='password'
  placeholder='Enter password'
  value={password}
  onChangeText={setPassword}
/>

With Label​

<Input
  name='password'
  type='password'
  label='Password'
  placeholder='Min 8 characters'
  value={password}
  onChangeText={setPassword}
/>

With Validation​

<Input
  name='password'
  type='password'
  label='Password'
  value={password}
  onChangeText={setPassword}
  errorMessage={errors.password}
  touched={touched.password}
/>

Numeric-only (PIN style)​

By default the password field accepts any text — letters, numbers, and symbols. Pass numericOnly to restrict input to digits and use a numeric keyboard (PIN style):

<Input
  name='pin'
  type='password'
  numericOnly
  placeholder='Enter PIN'
  value={pin}
  onChangeText={setPin}
/>

With a leading icon​

Pass a leftIcon to render a leading icon inside the field. The built-in show/hide eye stays in the rightIcon slot; you can override its appearance (but not its toggle function) by passing your own rightIcon:

<Input
  name='password'
  type='password'
  leftIcon={{name: 'lock'}}
  placeholder='Enter password'
  value={password}
  onChangeText={setPassword}
/>

Props​

PropTypeDescription
namestringRequired - Input identifier
type'password'Required - Must be 'password'
valuestringCurrent value
onChangeText(text: string) => voidChange handler
placeholderstringPlaceholder text
labelstring | InputLabelPropsInput label
errorMessagestringError message
touchedbooleanValidation touched state
numericOnlybooleanRestrict input to digits and use a numeric keyboard (default: false)
leftIconInputIconPropsOptional leading icon rendered inside the field
rightIconInputIconPropsOverrides the built-in show/hide eye's appearance (toggle function stays)

Features​

Show/Hide Toggle​

Automatically includes an eye icon to toggle password visibility.

Security​

  • Secure text entry by default
  • No copy/paste on some platforms
  • Auto-complete: 'password'

Validation Example​

import {Formik} from 'formik'
import * as Yup from 'yup'

const PasswordSchema = Yup.object().shape({
  password: Yup.string()
    .min(8, 'Too short')
    .matches(/[A-Z]/, 'Need uppercase')
    .matches(/[0-9]/, 'Need number')
    .required('Required'),
})

<Formik
  initialValues={{password: ''}}
  validationSchema={PasswordSchema}
  onSubmit={handleSubmit}>
  {({handleChange, values, errors, touched}) => (
    <Input
      name='password'
      type='password'
      label='Password'
      placeholder='Min 8 characters'
      value={values.password}
      onChangeText={handleChange('password')}
      errorMessage={touched.password ? errors.password : ''}
      touched={touched.password}
    />
  )}
</Formik>

Confirm Password​

<Input
  name='password'
  type='password'
  label='Password'
  value={password}
  onChangeText={setPassword}
/>

<Input
  name='confirmPassword'
  type='password'
  label='Confirm Password'
  value={confirmPassword}
  onChangeText={setConfirmPassword}
  errorMessage={password !== confirmPassword ? 'Passwords must match' : ''}
/>