> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# InlineEdit
Turns a displayed value into its own editor, so a reader can correct one field without opening a form — reach for a form when several values change together. Every story composes it inside an `Attribute`, because that is what keeps the read and edit states the same height and stops the row jumping on toggle.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/InlineEdit) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-inlineedit--overview)
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
export const TextEditor = () => {
const [text, setText] = useState('Checkout API');
return (
Name setText(v as string)}
data-testid='text'
>
{text}
);
};
```
## Usage
```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
```
## Examples
### Number editor
`InlineEditNumber` for a numeric field, with the steppers available while editing and gone
again once committed.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditNumber, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
export const NumberEditor = () => {
const [port, setPort] = useState('8443');
return (
Port setPort(v as string)}
data-testid='number'
>
{port}
);
};
```
### Textarea editor
For a value long enough to wrap. `lineClamp` on the preview keeps the row short in read mode
and lets the editor grow past it.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditPreview, InlineEditTextarea } from '@wallarm-org/design-system/InlineEdit';
export const TextareaEditor = () => {
const [about, setAbout] = useState(
'Displays a labeled value for a single object attribute. Used in detail panels, drawers and forms to present structured information.',
);
return (
About setAbout(v as string)}
data-testid='textarea'
>
{about}
);
};
```
### Select editor
`InlineEditSelect` for a value from a known set. Its children are ordinary `Select` parts, so
the menu behaves exactly as it would standalone.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect } from '@wallarm-org/design-system/InlineEdit';
import { SelectButton, SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
export const SelectEditor = () => {
const [role, setRole] = useState(['editor']);
const roleLabel = roleItems.find(i => i.value === (role[0] ?? ''))?.label ?? '';
return (
Role setRole(v as string[])}
data-testid='select'
>
{roleLabel}{renderSelectOptions(roleItems)}
);
};
```
### Multi select editor
The same editor with `multiple`, for a value that is genuinely a list rather than one choice.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect } from '@wallarm-org/design-system/InlineEdit';
import { SelectButton, SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
export const MultiSelectEditor = () => {
const [roles, setRoles] = useState(['editor', 'viewer']);
const rolesLabel = roles.map(v => roleItems.find(i => i.value === v)?.label ?? v).join(', ');
return (
Roles setRoles(v as string[])}
data-testid='multi-select'
>
{rolesLabel}{renderSelectOptions(roleItems)}
);
};
```
### Tags editor
A multi-select whose committed value reads as `Tag` chips, which suits a list the reader
scans rather than one they read as a sentence.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect } from '@wallarm-org/design-system/InlineEdit';
import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
import { Tag } from '@wallarm-org/design-system/Tag';
export const TagsEditor = () => {
const [tags, setTags] = useState(['production', 'critical']);
return (
Tags setTags(v as string[])}
data-testid='tags'
>
{tag}}
/>
{renderSelectOptions(tagItems)}
);
};
```
### Date editor
`InlineEditDate` hosts a `Calendar`, so the editor is a popover rather than a field — the row
stays the same height while it is open.
```tsx
import { useState } from 'react';
import { format } from 'date-fns';
import { type DateValue, CalendarDate } from '@wallarm-org/design-system';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { Calendar } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditDate, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue } from '@wallarm-org/design-system/InlineEdit';
export const DateEditor = () => {
const [date, setDate] = useState(new CalendarDate(2026, 6, 15));
const dateLabel = date
? format(new Date(date.year, date.month - 1, date.day), 'd MMM, yyyy')
: '—';
return (
Date setDate(v as DateValue | null)}
data-testid='date'
>
{dateLabel}
);
};
```
### Time editor
`InlineEditTime` for a time of day, taking the same value objects as `TimeInput`.
```tsx
import { useState } from 'react';
import { type TimeValue } from '@react-aria/datepicker';
import { format } from 'date-fns';
import { Time } from '@wallarm-org/design-system';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { Clock } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditTime } from '@wallarm-org/design-system/InlineEdit';
export const TimeEditor = () => {
const [time, setTime] = useState(new Time(14, 30));
const timeLabel = time ? format(new Date(2000, 0, 1, time.hour, time.minute), 'h:mm a') : '—';
return (
Time setTime(v as TimeValue | null)}
data-testid='time'
>
{timeLabel}
);
};
```
### Date time editor
Date and time in one editor, for a value where the pair only makes sense together.
```tsx
import { useState } from 'react';
import { format } from 'date-fns';
import { CalendarDateTime, Time } from '@wallarm-org/design-system';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { Calendar } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditDateTime, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue } from '@wallarm-org/design-system/InlineEdit';
export const DateTimeEditor = () => {
const [dateTime, setDateTime] = useState(
new CalendarDateTime(2026, 6, 15, 14, 30),
);
const dateTimeLabel = dateTime
? format(
new Date(dateTime.year, dateTime.month - 1, dateTime.day, dateTime.hour, dateTime.minute),
'd MMM, yyyy h:mm a',
)
: '—';
return (
Date & Time setDateTime(v as CalendarDateTime | null)}
data-testid='datetime'
>
{dateTimeLabel}
);
};
```
### Horizontal layout
`InlineEdit` inside a horizontal `Attribute` — label on the left, value/editor on the right.
The orientation belongs to `Attribute`, not here: `InlineEdit` has no orientation prop and
behaves identically either way.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect } from '@wallarm-org/design-system/InlineEdit';
import { SelectButton, SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
export const HorizontalLayout = () => {
const [name, setName] = useState('Checkout API');
const [role, setRole] = useState(['editor']);
const roleLabel = roleItems.find(i => i.value === (role[0] ?? ''))?.label ?? '';
return (
Name setName(v as string)}
data-testid='horizontal-text'
>
{name}Role setRole(v as string[])}
data-testid='horizontal-select'
>
{roleLabel}{renderSelectOptions(roleItems)}
);
};
```
### States
The three async states side by side. `saved` is transient and clears itself after
`savedDuration`, so it is pinned here to be looked at.
```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
export const States = () => (
NameCheckout API and ABCNameCheckout API and ABCNameCheckout API and ABCAn error message.
);
```
### Async
A commit that returns a promise. The field stays in edit mode until it resolves, and a
rejection keeps the reader's text rather than discarding it.
```tsx
import { useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
export const Async = () => {
const [value, setValue] = useState('Checkout API');
const save = (v: unknown) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if ((v as string).trim().length === 0) reject(new Error('Name is required.'));
else {
setValue(v as string);
resolve();
}
}, 1200);
});
return (
Name{value}
);
};
```
### Non editable
`readOnly` and `disabled` are different answers: read-only shows the value plainly with no
affordance, disabled says there is a control here that you cannot use.
```tsx
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';
export const NonEditable = () => (
Read onlyLocked valueDisabledDisabled value
);
```
### Confirm commit
`onBeforeValueCommit` intercepts the commit — return `false`, or a promise of it, to hold
the field open. Use it where the change is consequential enough to confirm, not for validation,
and short-circuit unchanged values: the guard fires on every commit path, no-op submits included.
```tsx
import { useRef, useState } from 'react';
import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { Button } from '@wallarm-org/design-system/Button';
import { Dialog, DialogBody, DialogContent, DialogFooter, DialogFooterControls, DialogHeader, DialogTitle } from '@wallarm-org/design-system/Dialog';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { InlineEdit, InlineEditControl, InlineEditInput, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect } from '@wallarm-org/design-system/InlineEdit';
import { SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
import { Text } from '@wallarm-org/design-system/Text';
export const ConfirmCommit = () => {
const [email, setEmail] = useState('dev@wallarm.com');
const [role, setRole] = useState(['editor']);
const [pending, setPending] = useState(null);
const resolverRef = useRef<((ok: boolean) => void) | null>(null);
// Promise-based confirm: the guard returns this promise and the dialog
// buttons settle it. The DS never closes the dialog — `settle` does.
const confirmChange = (message: string) =>
new Promise(resolve => {
resolverRef.current = resolve;
setPending(message);
});
const settle = (ok: boolean) => {
resolverRef.current?.(ok);
resolverRef.current = null;
setPending(null);
};
const roleLabel = roleItems.find(i => i.value === (role[0] ?? ''))?.label ?? '';
return (
Email
next === prev || confirmChange(`Change email to ${next as string}?`)
}
onValueCommit={v => setEmail(v as string)}
data-testid='confirm-email'
>
{email}Role {
// The guard fires on every popover close, including no-op ones —
// short-circuit when nothing changed (for dates use `.compare()`).
const nextRole = (next as string[]).join();
if (nextRole === (prev as string[]).join()) return true;
const label =
roleItems.find(i => i.value === (next as string[])[0])?.label ?? nextRole;
return confirmChange(`Change role to ${label}?`);
}}
onValueCommit={v => setRole(v as string[])}
data-testid='confirm-role'
>
{roleLabel}{renderSelectOptions(roleItems)}
);
};
```
## Props
| Prop | Type | Default | Description |
| ------------------- | --------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `T \| undefined` | | |
| defaultValue | `T \| undefined` | | |
| onValueChange | `((value: T) => void) \| undefined` | | |
| onValueCommit | `((value: T) => void \| Promise) \| undefined` | | |
| onValueRevert | `((value: T) => void) \| undefined` | | |
| onBeforeValueCommit | `((value: T, committedValue: T) => boolean \| void \| Promise) \| undefined` | | Commit guard. Called on every submit (Enter, blur, popover close, confirm button) before `onValueCommit`, with the draft to be committed and the current committed value. Only an explicit `false` (or a promise resolving to `false`) blocks the commit: the field silently stays in edit mode with the draft. Any other result — `true`, `undefined`, no return — lets the commit proceed. A rejection or a synchronous throw is treated like a commit failure: status `error`, message from the error, field stays in edit mode. While the guard's promise is pending the edit session is held: duplicate submits are suppressed, blur neither submits nor cancels, and the field shows no status (`idle` — the consumer's confirmation UI is the feedback). Escape still cancels; a late resolution after cancel is dropped. The value committed on `true` is exactly the `value` argument the guard received; if the draft changed while the guard was pending, the resolution is dropped and the field stays in edit mode. Guards must settle via non-blocking UI (a promise resolved by dialog buttons). Synchronous blocking dialogs (`window.confirm`) are unsupported with submitMode 'blur'/'both' (the queued blur re-prompts). The guard's owner never gets its consumer UI closed by the DS — treat the dialog's own buttons as the source of truth for closing it. |
| edit | `boolean \| undefined` | | |
| defaultEdit | `boolean \| undefined` | | |
| onEditChange | `((editing: boolean) => void) \| undefined` | | |
| activationMode | `InlineEditActivationMode \| undefined` | | |
| submitMode | `InlineEditSubmitMode \| undefined` | | |
| selectOnFocus | `boolean \| undefined` | | |
| status | `InlineEditStatus \| undefined` | | |
| savedDuration | `number \| undefined` | | |
| disabled | `boolean \| undefined` | | |
| readOnly | `boolean \| undefined` | | |
| data-testid | `string \| undefined` | | |
### InlineEditControl
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| submitMode | `InlineEditSubmitMode \| undefined` | | Explicit render-time submit mode for this editor session. Highest precedence (beats editor registrations and the root prop) — the escape hatch for custom editors that cannot call useInlineEditSubmitMode. |
| showActions | `boolean \| undefined` | `true` | Show floating action buttons (submit/cancel) below the input. Provides a mouse-clickable alternative to Enter/Escape keyboard shortcuts. |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
### InlineEditError
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
### InlineEditInput
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------------------------------- | ------------- | ----------- |
| title | `string \| undefined` | | |
| pattern | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| type | `HTMLInputTypeAttribute \| undefined` | | |
| disabled | `boolean \| undefined` | | |
| name | `string \| undefined` | | |
| size | `{ default: string; medium: string; small: string; 'inline-edit': string; }` | `inline-edit` | |
| alt | `string \| undefined` | | |
| data-testid | `string \| undefined` | | |
| height | `string \| number \| undefined` | | |
| src | `string \| undefined` | | |
| width | `string \| number \| undefined` | | |
| autoComplete | `HTMLInputAutoCompleteAttribute \| undefined` | | |
| maxLength | `number \| undefined` | | |
| minLength | `number \| undefined` | | |
| placeholder | `string \| undefined` | | |
| readOnly | `boolean \| undefined` | | |
| required | `boolean \| undefined` | | |
| checked | `boolean \| undefined` | | |
| step | `string \| number \| undefined` | | |
| accept | `string \| undefined` | | |
| max | `string \| number \| undefined` | | |
| min | `string \| number \| undefined` | | |
| multiple | `boolean \| undefined` | | |
### InlineEditNumber
| Prop | Type | Default | Description |
| ------------------ | ---------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| form | `string \| undefined` | | The associate form of the input element. |
| title | `string \| undefined` | | |
| pattern | `string \| undefined` | | The pattern used to check the \ element's value against |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| undefined` | | The initial value of the input when rendered. Use when you don't need to control the value of the input. |
| autoFocus | `boolean \| undefined` | | |
| id | `string` | | The unique identifier of the machine. |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| inputMode | `InputMode \| undefined` | | Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices |
| onChange | `ChangeEventHandler \| undefined` | | |
| disabled | `boolean \| undefined` | | Whether the number input is disabled. |
| name | `string \| undefined` | | The name attribute of the number input. Useful for form submission. |
| asChild | `boolean \| undefined` | | Use the provided child element as the default rendered element, combining their props and behavior. |
| size | `{ default: string; medium: string; small: string; 'inline-edit': string; }` | `inline-edit` | |
| data-testid | `string \| undefined` | | |
| ids | `ElementIds \| undefined` | | The ids of the elements in the number input. Useful for composition. |
| readOnly | `boolean \| undefined` | | Whether the number input is readonly |
| required | `boolean \| undefined` | | Whether the number input is required |
| step | `number \| undefined` | | The amount to increment or decrement the value by |
| max | `number \| undefined` | | The maximum value of the number input |
| min | `number \| undefined` | | The minimum value of the number input |
| translations | `IntlTranslations \| undefined` | | Specifies the localized strings that identifies the accessibility elements and their states |
| largeStep | `number \| undefined` | | The amount to increment or decrement the value by when the `Shift` key is held. |
| smallStep | `number \| undefined` | | The amount to increment or decrement the value by when the `Alt` key is held. |
| allowMouseWheel | `boolean \| undefined` | | Whether to allow mouse wheel to change the value |
| allowOverflow | `boolean \| undefined` | | Whether to allow the value overflow the min/max range |
| clampValueOnBlur | `boolean \| undefined` | | Whether to clamp the value when the input loses focus (blur) |
| focusInputOnChange | `boolean \| undefined` | | Whether to focus input when the value changes |
| formatOptions | `Intl.NumberFormatOptions \| undefined` | | The options to pass to the `Intl.NumberFormat` constructor |
| onValueInvalid | `complex` | | Function invoked when the value overflows or underflows the min/max range |
| onFocusChange | `complex` | | Function invoked when the number input is focused |
| onValueCommit | `complex` | | Function invoked when the value is committed (when the input is blurred or the Enter key is pressed) |
| spinOnPress | `boolean \| undefined` | | Whether to spin the value when the increment/decrement button is pressed |
| locale | `string \| undefined` | | The current locale. Based on the BCP 47 definition. |
### InlineEditPreview
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tooltip | `ReactNode` | `Edit` | Tooltip shown on hover/focus while the value is editable. Defaults to `'Edit'`. Pass `null` to disable the tooltip. |
| lineClamp | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | | Clamp the read-mode value to this many lines (with an ellipsis) instead of the default single-line truncation. Use for multi-line values (textarea). Applies to the default (no-parts) composition; when composing `InlineEditPreviewValue` explicitly, set `lineClamp` on it directly. |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| title | `string \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
### InlineEditPreviewValue
| Prop | Type | Default | Description |
| --------- | ----------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| lineClamp | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | | Clamp the read-mode value to this many lines (with an ellipsis) instead of the default single-line truncation. Use for multi-line values (textarea). |
### InlineEditSelect
| Prop | Type | Default | Description |
| ---------- | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| items | `SelectDataItem[] \| undefined` | | Options; the collection is built internally (PaginationPageSize precedent). Provide exactly one of `items` / `collection`. |
| collection | `complex` | | A prebuilt collection (e.g. built once upstream, or with custom filtering/sorting). Provide exactly one of `items` / `collection` — a dev-only warning fires otherwise. |
| multiple | `boolean \| undefined` | `false` | |
### InlineEditTextarea
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------------------------------- | ------------- | ----------- |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| disabled | `boolean \| undefined` | | |
| name | `string \| undefined` | | |
| size | `{ small: string; medium: string; default: string; 'inline-edit': string; }` | `inline-edit` | |
| data-testid | `string \| undefined` | | |
| autoComplete | `string \| undefined` | | |
| maxLength | `number \| undefined` | | |
| minLength | `number \| undefined` | | |
| placeholder | `string \| undefined` | | |
| readOnly | `boolean \| undefined` | | |
| required | `boolean \| undefined` | | |
| minRows | `number \| undefined` | | |
| maxRows | `number \| undefined` | | |
### InlineEditTime
| Prop | Type | Default | Description |
| ---------------- | ----------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `TimeValue \| null \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| disabled | `boolean \| undefined` | | Whether the input is disabled. Prevents user interaction. |
| name | `string \| undefined` | | |
| size | `TemporalInputSize \| undefined` | `inline-edit` | Visual size. Default: 'default' (36px). |
| data-testid | `string \| undefined` | | |
| error | `boolean \| undefined` | | Whether the input has an error state. Sets `aria-invalid` and error styling. |
| placeholder | `string \| undefined` | | Placeholder shown when no value is selected. |
| readOnly | `boolean \| undefined` | | Whether the input is read-only. Segments are focusable but not editable. |
| showIcon | `boolean \| undefined` | `false` | Whether to show the leading icon. Default: true. |
| minValue | `TimeValue \| undefined` | | |
| maxValue | `TimeValue \| undefined` | | |
| placeholderValue | `TimeValue \| undefined` | | |
| isRequired | `boolean \| undefined` | | Marks the field as required in assistive tech and HTML form validation. |
| showTimeDropdown | `boolean \| undefined` | `true` | Show dropdown for time selection with arrow navigation. |
| timeStep | `number \| undefined` | | Time interval in minutes for dropdown options. Default: 30. |
| granularity | `TimeInputGranularity \| undefined` | `minute` | Smallest editable unit. - 'hour': hours only - 'minute': hours and minutes (default) - 'second': hours, minutes, and seconds |
## Explorer