Components
<Update Field Card />
Generic settings card for updating custom user fields
Import
import { UpdateFieldCard } from "@better-auth/ui-react/components"Usage
<UpdateFieldCard
name="phoneNumber"
label="Phone Number"
type="text"
placeholder="Enter your phone number"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string | (required) | Field name in the user object |
label | ReactNode | undefined | Display label for the field |
type | "text" | "number" | "boolean" | "text" | Input type for the field |
value | unknown | undefined | Current field value |
placeholder | string | undefined | Input placeholder text |
required | boolean | false | Whether the field is required |
description | ReactNode | undefined | Description text shown below the title |
instructions | ReactNode | undefined | Additional instructions shown in the card |
validate | (value: string) => boolean | Promise<boolean> | undefined | Custom validation function |
className | string | undefined | Additional CSS classes for styling |
classNames | SettingsCardClassNames | undefined | Class names for individual card components |
localization | Partial<AuthLocalization> | undefined | Localization object for translations |
Examples
Text Field
<UpdateFieldCard
name="bio"
label="Bio"
type="text"
placeholder="Tell us about yourself"
description="A short description about you"
/>Number Field
<UpdateFieldCard
name="age"
label="Age"
type="number"
required
validate={(value) => Number(value) >= 18}
/>Boolean Field
<UpdateFieldCard
name="newsletter"
label="Subscribe to newsletter"
type="boolean"
description="Receive updates about new features"
/>Features
- Supports text, number, and boolean field types
- Built-in form validation
- Custom validation support
- Success/error feedback
- Loading states during update
- Checkbox UI for boolean fields
- Integrated with Better Auth additional fields