Read-only Field
Campo de solo lectura
Un campo de solo lectura puede recibir el foco y su valor puede ser copiado. La persona no puede editar el valor.
readonly: focus + copy + submit, no edit; disabled: no normal focus or submit- 1Nombre visible · editable
value="Maya" - 2Account ID · solo lectura
readonly - 3Código de invitación · deshabilitado
disabled
<input readonly>readonly: focus + copy + submit, no edit; disabled: no normal focus or submitA11YOtro ejemplo
Un ID de cuenta es de solo lectura. Una persona puede enfocarse en él y copiarlo. El campo nativo compatible aún envía su valor.
Partes principales
- 01etiqueta de campo
- 02Valor actual
- 03Atributo de solo lectura
- 04Comportamiento de enfoque
- 05Comportamiento de copia
- 06Comportamiento de envío de formulario
Úsalo cuando
Úselo cuando un valor debe permanecer visible y disponible para copiar. La tarea actual no debe permitir edición.
No lo uses cuando
No uses aria-readonly solo para bloquear la edición. El readonly nativo solo se aplica a los controles de texto compatibles.
Nombre usado en código
readonly: focus + copy + submit, no edit; disabled: no normal focus or submit Antes de lanzarlo
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Campo de solo lectura (Read-only Field). User context: Un ID de cuenta es de solo lectura. Una persona puede enfocarse en él y copiarlo. El campo nativo compatible aún envía su valor. Recommended pattern: Campo de solo lectura (Read-only Field). Why it fits: Úselo cuando un valor debe permanecer visible y disponible para copiar. La tarea actual no debe permitir edición. Do not use it when: No uses aria-readonly solo para bloquear la edición. El readonly nativo solo se aplica a los controles de texto compatibles. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Campo de solo lectura (Read-only Field) is used now. Definition: Un campo de solo lectura puede recibir el foco y su valor puede ser copiado. La persona no puede editar el valor. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.