Make TextBox uneditable

TextBox

Uneditable

ReadOnly

UI Development

User Interface

Make TextBox uneditable

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Making a text box uneditable prevents users from modifying its content while still displaying the value. There are two main approaches across platforms: readonly (the field is not editable but its value is still submitted with forms) and disabled (the field is completely non-interactive and its value is not submitted). The correct choice depends on whether you need the value included in form submissions and whether the field should be focusable. This article covers HTML, WPF, WinForms, Android, and iOS implementations.

HTML: readonly Attribute

html

1<!-- readonly: not editable, value IS submitted with the form -->
2<input type="text" value="Fixed Value" readonly />
3
4<!-- disabled: not editable, value is NOT submitted -->
5<input type="text" value="Ignored Value" disabled />
6
7<!-- textarea also supports both -->
8<textarea readonly>This text cannot be changed</textarea>
9<textarea disabled>This text is completely disabled</textarea>

readonly keeps the field focusable (you can tab to it and select text) and includes its value in form data. disabled grays out the field and excludes its value from form submissions.

HTML: Setting readonly with JavaScript

html

1<input type="text" id="myInput" value="Editable initially" />
2<button onclick="makeReadonly()">Lock</button>
3<button onclick="makeEditable()">Unlock</button>
4
5<script>
6function makeReadonly() {
7    document.getElementById('myInput').readOnly = true;
8}
9
10function makeEditable() {
11    document.getElementById('myInput').readOnly = false;
12}
13
14// Using setAttribute
15function toggleDisabled(disable) {
16    const input = document.getElementById('myInput');
17    if (disable) {
18        input.setAttribute('disabled', 'disabled');
19    } else {
20        input.removeAttribute('disabled');
21    }
22}
23</script>

In JavaScript, use element.readOnly = true (camelCase) for the readonly property. For disabled, use element.disabled = true or setAttribute('disabled', 'disabled').

CSS: Styling Readonly Fields

css

1/* Style readonly inputs differently */
2input[readonly] {
3    background-color: #f0f0f0;
4    border: 1px solid #ccc;
5    color: #666;
6    cursor: not-allowed;
7}
8
9/* Style disabled inputs */
10input:disabled {
11    background-color: #e9e9e9;
12    opacity: 0.6;
13    cursor: not-allowed;
14}
15
16/* Make contenteditable div read-only visually */
17.readonly-div {
18    pointer-events: none;
19    user-select: none;
20    opacity: 0.7;
21}

Browsers apply default disabled styling (grayed out), but readonly fields look identical to editable fields by default. Add custom CSS to visually distinguish read-only fields.

React

jsx

1import { useState } from 'react';
2
3function ReadonlyInput() {
4    const [isLocked, setIsLocked] = useState(true);
5    const [value, setValue] = useState('Protected content');
6
7    return (
8        <div>
9            <input
10                type="text"
11                value={value}
12                readOnly={isLocked}
13                onChange={(e) => setValue(e.target.value)}
14            />
15            <button onClick={() => setIsLocked(!isLocked)}>
16                {isLocked ? 'Unlock' : 'Lock'}
17            </button>
18        </div>
19    );
20}

In React, use the readOnly prop (camelCase). Combine with state to toggle editability dynamically.

WPF (C#)

xml

1<!-- XAML: IsReadOnly property -->
2<TextBox Text="Cannot edit this" IsReadOnly="True" />
3
4<!-- IsEnabled disables the entire control -->
5<TextBox Text="Disabled entirely" IsEnabled="False" />
6
7<!-- Binding to a property -->
8<TextBox Text="{Binding UserName}" IsReadOnly="{Binding IsLocked}" />

csharp

1// Code-behind
2myTextBox.IsReadOnly = true;
3
4// Or disable completely
5myTextBox.IsEnabled = false;
6
7// Dynamic toggle
8private void ToggleReadOnly(object sender, RoutedEventArgs e)
9{
10    myTextBox.IsReadOnly = !myTextBox.IsReadOnly;
11}

WPF's IsReadOnly allows text selection and copying but prevents editing. IsEnabled = false grays out the control completely.

WinForms (C#)

csharp

1// ReadOnly — text is selectable but not editable
2textBox1.ReadOnly = true;
3textBox1.BackColor = SystemColors.Control; // Match readonly appearance
4
5// Enabled — completely disabled
6textBox1.Enabled = false;
7
8// Toggle at runtime
9private void btnToggle_Click(object sender, EventArgs e)
10{
11    textBox1.ReadOnly = !textBox1.ReadOnly;
12}

In WinForms, setting ReadOnly = true changes the background to gray by default. Override BackColor if you want a different appearance.

Android (Kotlin)

kotlin

1// In code
2editText.isEnabled = false           // Completely disabled
3editText.isFocusable = false         // Cannot receive focus
4editText.isFocusableInTouchMode = false
5
6// Or use inputType to prevent keyboard
7editText.inputType = InputType.TYPE_NULL

xml

1<!-- In XML layout -->
2<EditText
3    android:id="@+id/editText"
4    android:layout_width="match_parent"
5    android:layout_height="wrap_content"
6    android:text="Read only text"
7    android:enabled="false" />
8
9<!-- Alternative: focusable approach -->
10<EditText
11    android:text="Not editable"
12    android:focusable="false"
13    android:focusableInTouchMode="false"
14    android:clickable="false" />

Android's EditText does not have a direct readonly property. Disable it with enabled="false" or prevent focus with focusable="false".

iOS (Swift)

swift

1// UITextField
2textField.isEnabled = false         // Grayed out, no interaction
3textField.isUserInteractionEnabled = false  // No touch events at all
4
5// UITextView
6textView.isEditable = false         // Cannot edit, but can still scroll/select
7textView.isSelectable = true        // Allow text selection for copy
8
9// Dynamic toggle
10func toggleEditing(_ locked: Bool) {
11    textField.isEnabled = !locked
12    textView.isEditable = !locked
13}

UITextView.isEditable = false is the closest to HTML's readonly — the user can scroll and select text but cannot edit. isEnabled = false disables all interaction.

Common Pitfalls

Using disabled when readonly is needed: disabled fields do not submit their values with HTML forms. If the server needs the value, use readonly instead.
Forgetting visual feedback: readonly fields look identical to editable fields by default in HTML. Users cannot tell the field is locked unless you add CSS styling (gray background, different cursor).
Readonly does not prevent JavaScript modification: readonly only prevents user input. JavaScript can still change element.value. For security, always validate on the server — client-side readonly is a UX hint, not a security measure.
contenteditable divs ignore readonly: HTML readonly and disabled only work on input and textarea elements. For contenteditable divs, set contenteditable="false" or use pointer-events: none in CSS.
Android EditText focus issues: Setting enabled="false" changes the visual style. If you only want to prevent editing while keeping the normal appearance, use focusable="false" and focusableInTouchMode="false" instead.

Summary

Use readonly in HTML when the value should be submitted with the form but not editable
Use disabled when the field should be completely non-interactive and excluded from submissions
In WPF, use IsReadOnly="True"; in WinForms, use ReadOnly = true
In Android, set enabled="false" or focusable="false" on EditText
In iOS, set isEditable = false on UITextView or isEnabled = false on UITextField
Always add visual styling to indicate that a field is read-only — browsers do not style readonly by default