---
title: "Editable title"
description: "A record’s name renamed in place: press it, type, Enter or leave the field to save, Esc to put it back. It takes the look of the heading it sits in."
---

> 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.

# Editable title

## Page title

```tsx
import { useState } from 'react';
import { EditableTitle, PageTitle } from '@arbol-ai/ui';

const AgentName = () => {
  const [name, setName] = useState('');
  return (
    <PageTitle>
      <EditableTitle
        fallback="Unnamed agent"
        label="Agent name"
        onSave={setName}
        placeholder="Agent name"
        value={name}
      />
    </PageTitle>
  );
};

<AgentName />
```

## Card title, and read-only

Inside a smaller heading it takes that heading’s size; isReadOnly shows the name as text.

```tsx
import { Card, CardContent, CardHeader, CardTitle, EditableTitle, PageTitle } from '@arbol-ai/ui';

<div className="grid max-w-md gap-3">
  <Card className="py-4">
    <CardHeader className="px-4">
      <CardTitle>
        <EditableTitle label="List name" onSave={() => undefined} value="March recall list" />
      </CardTitle>
    </CardHeader>
    <CardContent className="text-muted-foreground px-4 text-sm">1,240 contacts</CardContent>
  </Card>
  <PageTitle>
    <EditableTitle isReadOnly label="Agent name" onSave={() => undefined} value="Front desk agent" />
  </PageTitle>
</div>
```

## Source

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

Source: https://epidermis.getarbol.com/components/blocks/editable-title/index.mdx