Skip to Content
PatternsFormsSettings Form

Settings Form

A grouped settings form with sections, toggles, and input fields. Built using Column, Row, Text, Switch, and TextField components.

NotificationsManage how you receive notifications
Email notificationsReceive email updates about your account
Push notificationsReceive push notifications on your device
ProfileUpdate your personal information
Display nameThis is how others will see you

Source

'use client';
 
import { Box, Column, Row, Switch, Text, TextField } from '@umami/react-zen';
 
export function SettingsForm({ children, ...props }) {
  return (
    <Column gap="6" {...props}>
      {children}
    </Column>
  );
}
 
export function SettingsSection({ title, description, children }) {
  return (
    <Column gap="4">
      <Column gap="1">
        <Text weight="semibold">{title}</Text>
        {description && <Text color="muted">{description}</Text>}
      </Column>
      <Column gap="4" paddingLeft="0">
        {children}
      </Column>
    </Column>
  );
}
 
export function SettingsRow({ label, description, children }) {
  return (
    <Row
      alignItems="center"
      justifyContent="space-between"
      paddingY="3"
      borderColor="muted"
      border="bottom"
    >
      <Column gap="0" flexGrow="1" maxWidth="70%">
        <Text weight="medium">{label}</Text>
        {description && <Text color="muted">{description}</Text>}
      </Column>
      <Box>{children}</Box>
    </Row>
  );
}
 
export function SettingsToggle({ label, description, isSelected, onChange }) {
  return (
    <SettingsRow label={label} description={description}>
      <Switch isSelected={isSelected} onChange={onChange} />
    </SettingsRow>
  );
}
 
export function SettingsInput({ label, description, value, onChange, placeholder, type = 'text' }) {
  return (
    <SettingsRow label={label} description={description}>
      <TextField
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        type={type}
        width="12rem"
      />
    </SettingsRow>
  );
}

Variations

Multiple sections

AccountManage your account settings
Two-factor authenticationAdd an extra layer of security
Session timeoutAutomatically log out after inactivity
PrivacyControl your privacy settings
Profile visibilityAllow others to see your profile
Activity statusShow when you're online

With custom controls

Appearance
ThemeChoose your preferred theme
LanguageSelect your language
English (US) ▾
Login Form