How to have a text field that is read-only / disabled?

[pcolmer]

We want to have something like FormField, which is suitable for a single line of text and cannot be resized, displaying some information that has been determined as a result of a user action.

We're currently achieving that with this approach:

          <FormField
            label="Release Stream Description"
            errorText={errors.description?.message}
          >
            <ControlledInput name="description" control={control} readOnly />
          </FormField>

Unfortunately, the field can be selected, which suggests to the user that they can type in that field (even though they can't).

The only other control I've found in Cloudscape that potentially meets our needs is Textarea, which supports a disabled property so that the field cannot be selected ... but it allows resizing! There doesn't seem to be a property that prevents resizing.

Is there any way to get closer to what we want, a single line of text in some sort of container that cannot be selected by the user?

[jperals]

Hi Philip,

The Input component is suitable for a single line of text and also has a readOnly property. Would it fit your needs?

Unfortunately, the field can be selected, which suggests to the user that they can type in that field (even though they can't).

Note that the Form Field component itself does not render any particular actual "input field" in which the user can enter a value, it is basically a wrapper around it to display a related label and eventual validation errors. The input field in your case is rendered by the ControlledInput component which I assume is a component of your own.

So this is what I am wondering if it would work for you:

<FormField
  label="Release Stream Description"
  errorText={errors.description?.message}
>
  <Input value={value} readOnly />
</FormField>

[pcolmer]

Thanks, @jperals, for the suggestion.

In the end, we decided on a redesign of the UI. We switched to a more conventional display of key-value pairs so that there was no fear of users thinking these were fields that could be altered.