Components

SecureField

Enter a password through a native, visually masked input.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { SecureField } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={16}>
      <SecureField placeholder="Enter password"/>
      <SecureField placeholder="Disabled field" disabled/>
    </VStack>));
}

Usage and limitations

  • Controlled: pass value and onChange (a React change event). Uncontrolled: use defaultValue.
  • Supports native input attributes such as disabled, autoComplete, and placeholder. Provide a visible label or aria-label; placeholders do not replace labels.
  • Masking hides text on screen; applications remain responsible for validation, transport security and safe credential handling.
  • Check password-manager autofill and mobile keyboard behavior in your target browsers.

API reference

This component currently relies on inherited element props.

Inherits additional props from Omit<ITextFieldProps, 'type'>.

Edit this page on GitHubReport an issue

Section

Group related rows under an optional header.

SettingsLink

SettingsLink mirrors SwiftUI's settings-entry affordance while staying web-native as a standard link.