Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select with three honest states: editable, read-only (focusable, selectable text and a Copy button) and disabled with a stated reason. Use this when a field is sometimes locked and people need to know why and still read its value.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in forms that show the same fields to people with different rights, where a locked field should still be readable, copyable and explain itself instead of just greying out.
Do not use it when the field is never editable. Show plain text.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| ---------------- | ------------------------- | ------------- | ------------------------------------------ | ------ | ---------- |
| mode | "edit" \\ | "readonly" \\ | "disabled" | edit | The state. |
| options | { value, label }[] | - | The choices. |
| value | string | - | Selected value (controlled). |
| defaultValue | string | "" | Initial value. |
| onValueChange | (value: string) => void | - | Runs when a value is chosen (edit mode). |
| label | string | - | Visible label. |
| disabledReason | string | - | Why the field is disabled; shown under it. |
aria-readonly="true" and a lock icon with text Read only; Enter and Space do nothing, and the Copy button copies the visible value and announces Copied.disabled and shows disabledReason under the field, linked with aria-describedby on the (removed-from-tab-order) control and visible to everyone.The pattern ships with a Testing Library test (select-readonly-and-disabled-states.test.tsx) that covers the three modes, no opening when read-only, the copy button and the disabled reason.