# Editable Value
URL: /docs/web/components/editable-value

Inline editable field with display/edit mode switching, popover auto-open, and change tracking.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import { type EnumOption, type IField } from '@docyrus/ui/components/form-fields';

import { EditableValue } from '@docyrus/ui/components/editable-value';
import { cn } from '@docyrus/ui/primitives/lib/utils';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';

// ── Field configs ──────────────────────────────────────────

const FIELDS = {
  text: {
    id: '1', name: 'Company Name', slug: 'company_name', type: 'field-text'
  },
  number: {
    id: '2', name: 'Revenue', slug: 'revenue', type: 'field-number'
  },
  email: {
    id: '3', name: 'Email', slug: 'email', type: 'field-email'
  },
  url: {
    id: '4', name: 'Website', slug: 'website', type: 'field-url'
  },
  phone: {
    id: '5', name: 'Phone', slug: 'phone', type: 'field-phone'
  },
  money: {
    id: '6', name: 'Budget', slug: 'budget', type: 'field-money'
  },
  percent: {
    id: '7', name: 'Completion', slug: 'completion', type: 'field-percent'
  },
  duration: {
    id: '8', name: 'Duration', slug: 'duration', type: 'field-duration'
  },
  currency: {
    id: '9', name: 'Currency', slug: 'currency_code', type: 'field-currency'
  },
  checkbox: {
    id: '10', name: 'Active', slug: 'active', type: 'field-checkbox'
  },
  switchField: {
    id: '11', name: 'Notifications', slug: 'notifications', type: 'field-switch'
  },
  rating: {
    id: '12', name: 'Rating', slug: 'rating', type: 'field-rating'
  },
  select: {
    id: '13', name: 'Priority', slug: 'priority', type: 'field-select'
  },
  status: {
    id: '14', name: 'Status', slug: 'status', type: 'field-status'
  },
  radioGroup: {
    id: '15', name: 'Type', slug: 'type', type: 'field-radioGroup'
  },
  enumField: {
    id: '16', name: 'Category', slug: 'category', type: 'field-enum'
  },
  multiSelect: {
    id: '17', name: 'Tags', slug: 'tags', type: 'field-multiSelect'
  },
  tagSelect: {
    id: '18', name: 'Labels', slug: 'labels', type: 'field-tagSelect'
  },
  date: {
    id: '19', name: 'Founded Date', slug: 'founded_date', type: 'field-date'
  },
  dateTime: {
    id: '20', name: 'Last Login', slug: 'last_login', type: 'field-dateTime'
  },
  time: {
    id: '21', name: 'Start Time', slug: 'start_time', type: 'field-time'
  },
  dateRange: {
    id: '22', name: 'Sprint Dates', slug: 'sprint_dates', type: 'field-dateRange'
  },
  color: {
    id: '23', name: 'Brand Color', slug: 'brand_color', type: 'field-color'
  },
  icon: {
    id: '24', name: 'Icon', slug: 'icon', type: 'field-icon'
  },
  approvalStatus: {
    id: '25',
    name: 'Approval',
    slug: 'approval',
    type: 'field-approvalStatus',
    options: {
      placeholder: 'Add approval comment...',
      canRespond: true,
      currentUser: {
        userId: 'u2',
        name: 'Bob Smith'
      }
    }
  }
} satisfies Record<string, IField>;

const PRIORITY_OPTIONS: Array
                  
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Show Actions</span>
              </label>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Explicit Save</span>
              </label>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Disabled</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-lg space-y-6 rounded-lg border bg-background p-6">
        {/* Inline Fields */}
        <section>
          <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Inline Fields</h4>
          <div className="flex flex-col gap-3">
            
            
            
            
            <Row label="Phone" field={FIELDS.phone} value={phone} onValueChange={setPhone} record={phoneRecord} onCompanionChange={changes => setPhoneRecord(prev => ({ ...prev, ...changes }))} {...shared} />
            <Row label="Money" field={FIELDS.money} value={money} onValueChange={setMoney} record={moneyRecord} onCompanionChange={changes => setMoneyRecord(prev => ({ ...prev, ...changes }))} {...shared} />
            
            
            
            
            
            
          </div>
        </section>

        {/* Popover / Select Fields */}
        <section>
          <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Popover / Select Fields</h4>
          <div className="flex flex-col gap-3">
            
            
            
            
            
            
            
          </div>
        </section>

        {/* Date / Time Fields */}
        <section>
          <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Date / Time Fields</h4>
          <div className="flex flex-col gap-3">
            
            
            
            
          </div>
        </section>

        {/* Visual Fields */}
        <section>
          <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Visual Fields</h4>
          <div className="flex flex-col gap-3">
            
            
          </div>
        </section>
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-editable-value
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  EditableValue
} from "@docyrus/ui/components/editable-value";

<EditableValue
  variant="default"
  size="sm"
  field={...}
  value={...}
  onValueChange={() => {}}
  onCompanionChange={() => {}}
  record={...}
  enumOptions={EnumOption[]}
  form={...}
  disabled
  readOnly
  showActions
  explicitSave
  editing
  onEditingChange={() => {}}
  trackChanges
  changed
  appSlug="..."
  dataSourceSlug="..."
/>
```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `ghost` | Ghost variant |

## Sizes

| Size | Description |
|------|-------------|
| `sm` | Small — `min-h-7 px-1.5 py-0.5 text-xs` |
| `default` | Default — `min-h-9 px-2 py-1 text-sm` |
| `lg` | Large — `min-h-11 px-3 py-1.5 text-base` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"ghost"` | `"default"` |
| `size` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
| `field` | `IField` | — |
| `value` | `unknown` | — |
| `onValueChange` | `(value: unknown) => void` | — |
| `onCompanionChange` | `(changes: Record<string, unknown>) => void` | — |
| `record` | `Record<string, unknown>` | — |
| `enumOptions` | `Array<EnumOption>` | — |
| `form` | `any` | — |
| `disabled` | `boolean` | — |
| `readOnly` | `boolean` | — |
| `showActions` | `boolean` | — |
| `explicitSave` | `boolean` | — |
| `editing` | `boolean` | — |
| `onEditingChange` | `(editing: boolean) => void` | — |
| `trackChanges` | `boolean` | — |
| `changed` | `boolean` | — |
| `editHint` | `"progressive"` \| `"visible"` | `"progressive"` |
| `appSlug` | `string` | — |
| `dataSourceSlug` | `string` | — |
| `className` | `string` | — |