Editable title

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.

Language

Appearance

Page title

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.

1,240 contacts

Front desk agent

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, which the library’s tests render too.