Components
<UpdateFieldCard />
Generic settings card for updating custom user fields
Import
import { UpdateFieldCard } from "@daveyplate/better-auth-ui"Usage
import { UpdateFieldCard } from "./update-field-card";
<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 | "string" | "number" | "boolean" | "select" | "string" | 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 |
options | SelectOption[] | undefined | Array of select options |
Examples
String Field
<UpdateFieldCard
name="bio"
label="Bio"
type="string"
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"
/>Select Field
<UpdateFieldCard
name="role"
label="User Role"
type="select"
value="admin"
required
options={[
{ label: "Admin", value: "admin" },
{ label: "User", value: "user" },
{ label: "Guest", value: "guest" }
]}
/>Features
- Supports text, number, boolean and select 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