Description

When using the readOnly prop on TextField.Root, the component appears with reduced opacity as if it were disabled.

Expected Behavior

A readOnly TextField should maintain normal appearance and only prevent text input/editing, matching native HTML readonly input behavior. The cursor should remain as text (I-beam) to indicate the field is interactive and text can be selected.

Current Behavior

A readOnly TextField appears grayed out with reduced opacity, identical to a disabled field. The cursor shows as not-allowed, which incorrectly suggests the field is completely non-interactive.

Code Example

  <TextField.Root
    readOnly
    value="Some value"
    placeholder="Placeholder text"
  />

Visual Comparison

• Expected: Normal appearance with full opacity, text cursor, text is just not editable but can be selected
• Actual: Grayed out with reduced opacity, not-allowed cursor, looks disabled