---
title: "Settings card"
description: "One topic of a settings or record page as a card: icon, title, description and one action at its head, then its fields, and Save and Cancel at its foot when it edits in place."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings card

## Topic with fields

```tsx
import { BuildingsIcon } from '@phosphor-icons/react';
import { SettingsCard, TextField } from '@arbol-ai/ui';

<SettingsCard
  className="max-w-xl"
  description="How your organization appears to patients and in every app."
  icon={<BuildingsIcon />}
  title="Company"
>
  <TextField defaultValue="Clínica Norte" label="Name" />
  <TextField defaultValue="NIT 900.123.456-7" label="Tax ID" />
</SettingsCard>
```

## Edited in place

Edit turns the card into a form; Save and Cancel sit at its foot.

```tsx
import { IdentificationCardIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { Button, Property, PropertyList, SettingsCard, TextField } from '@arbol-ai/ui';

const PatientData = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [phone, setPhone] = useState('+57 300 555 0101');
  const [draft, setDraft] = useState(phone);
  return (
    <SettingsCard
      action={
        isEditing ? null : (
          <Button
            onPress={() => {
              setDraft(phone);
              setIsEditing(true);
            }}
            size="sm"
            variant="outline"
          >
            Edit
          </Button>
        )
      }
      className="max-w-xl"
      description="Filled in when booking; correct them here."
      footer={
        isEditing ? (
          <>
            <Button
              onPress={() => {
                setPhone(draft);
                setIsEditing(false);
              }}
              size="sm"
            >
              Save changes
            </Button>
            <Button
              onPress={() => {
                setIsEditing(false);
              }}
              size="sm"
              variant="ghost"
            >
              Cancel
            </Button>
          </>
        ) : undefined
      }
      icon={<IdentificationCardIcon />}
      title="Patient data"
    >
      {isEditing ? (
        <TextField label="Phone" onChange={setDraft} value={draft} />
      ) : (
        <PropertyList columns={2}>
          <Property label="Document">CC 1.020.304.050</Property>
          <Property label="Phone">{phone}</Property>
        </PropertyList>
      )}
    </SettingsCard>
  );
};

<PatientData />
```

## Source

The examples above are [`src/blocks/settings-card/settings-card.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/settings-card/settings-card.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/settings-card/index.mdx