Consistent read-only state for form components

[akselkvitberg]

Version: @bcc-code/component-library-vue 1.4.36

We show forms to users who may view but not edit them. There is no single way to render such a form as read-only with the library today, so every app works around it differently.

Everything below was reproduced in a bare Vite + Vue app that only does app.use(BccComponentLibrary) and imports @bcc-code/component-library-vue/style.css. There is no Tailwind, no other UI library and no app CSS.

What we ran into

1. BccSelect and BccInputChips accept readonly but ignore it. They re-export PrimeVue Select and InputChips, which have no such prop, so readonly lands on the root element as a plain attribute. A readonly BccSelect still opens its dropdown, and a readonly BccInputChips still adds a tag on Enter and still shows each chip's remove icon. BccInput, BccTextarea and BccCheckbox do support readonly, so a mixed form ends up part readonly and part disabled.
2. Readonly fields look editable. Readonly BccInput, BccTextarea and BccSelect compute to the same background (#fff) and text colour (rgb(41, 42, 46)) as editable ones, so users only find out when they try to type.
3. Disabled fields fade the value to about 2:1 contrast. Disabled BccInput, BccTextarea and the BccSelect label use --p-inputtext-disabled-color (rgba(8, 15, 33, .29)) on --p-inputtext-disabled-background (rgba(5, 21, 36, .06)), which is 1.93:1. That's fine for a control that really is unavailable (WCAG exempts inactive components), but it makes disabled unusable as a stand-in for read-only, where people need to read the value.
4. Disabled BccInputChips is styled differently from the other disabled fields.
   • Its background is --p-inputchips-disabled-background (#dddee1), so it renders darker than the inputs next to it.
   • It fades through opacity: 0.6 on the whole component, about 3.3:1 for the chip text, instead of the disabled text colour.
   • It keeps showing each chip's remove icon.
5. A readonly BccCheckbox still fires a native change on click. The model stays unchanged, but the native input flips to checked, and a form-level @change listener, such as unsaved-changes tracking, still sees an edit.

Suggestion

• Add a real readonly to BccSelect and BccInputChips. Readonly should mean: focusable, value selectable, no dropdown or editing, chip remove icons hidden.
• Give readonly fields a visual style of their own in the theme, e.g. a muted background with full-contrast text, used the same way across BccInput, BccTextarea, BccSelect, BccInputChips and BccCheckbox.
• Style disabled InputChips the same way as the other disabled inputs (same background token, same text treatment) and hide the chip remove icon.
• Stop the native change event on a readonly BccCheckbox (e.g. preventDefault on click), so the native state matches the model.

Our workaround for now is a scoped style that gives readonly and disabled fields the same muted background and full-contrast text, and hides the chip remove icons. We'd rather delete it than keep it.

[akselkvitberg]

A follow-up on the InputChips points: BccInputChips re-exports PrimeVue InputChips, which PrimeVue deprecated in v4. It is missing from the v4 docs, and the bundled copy logs "Deprecated since v4. Use AutoComplete component instead with its typeahead property." on every mount. So the InputChips part of this issue is better aimed at BccAutoComplete with multiple and :typeahead="false", which is what we switched to.

Checked in the same bare setup (1.4.36, only BccComponentLibrary and style.css):

• readonly is ignored. A readonly BccAutoComplete still adds a tag when you type and press Enter, and still removes a chip when you click its icon. It also looks the same as an editable one (#fff background).
• disabled is mostly fine. The background is --p-autocomplete-disabled-background (rgba(5, 21, 36, .06)), the same as the other inputs, and the chip text stays at full contrast (12.67:1). The chip remove icons are still shown, though they do nothing (pointer-events: none).

Suggestions for BccAutoComplete:

• Add a real readonly: no adding or removing, remove icons hidden.
• Hide the remove icons when disabled.
• Consider deprecating the BccInputChips export, so new code does not pick it up.

[jasverix]

Form States Demo - Complete Form with Screenshots

I've created a complete form example demonstrating all input types in three states: normal, readonly, and disabled.

Form Fields Included:

• Title (text input)
• Description (textarea)
• Start Date (date picker)
• End Date (date picker)
• Tags (chips/input)
• Active (checkbox)
• Action Buttons (Back, Save, Delete)

All fields are pre-populated with sample data.

Screenshots

Normal State - All fields are editable and fully interactive

Readonly State - All fields show the readonly prop applied; users can view but not edit

Disabled State - All fields are disabled; showing reduced visibility/contrast

Issues Visible in Screenshots:

1. ✅ BccInput, BccTextarea, BccDatePicker, BccCheckbox - Properly support readonly prop
2. ❌ BccInputChips - Accepts readonly but visually ignores it; chips can still be edited/removed
3. ❌ Readonly state lacks visual distinction - Readonly fields look identical to normal editable fields
4. ❌ Disabled contrast is too low - Text and backgrounds have insufficient contrast (~2:1), making values hard to read
5. ❌ BccInputChips disabled styling - Uses different styling approach (opacity) compared to other disabled inputs
6. ❌ Button states - All buttons properly show disabled state

Deliverables

• Story file: component-library/src/components/wrapped/FormDemo.stories.ts
  • Three separate stories: Normal State, Readonly State, Disabled State
  • Complete real-world form example
  • Can be used to validate fixes as mentioned in the issue

View the demo in Storybook by running pnpm dev in the component-library directory and navigating to "Form Demo / Complete Form".

[jasverix]

There are no readonly state in any components in PrimeVue. The reason some of them works, is because readonly are just passed forward to the HTML element because Vue works that way, and HTML input has a readonly prop support.

PrimeVue only supports disabled. Maybe we should just redesign the disabled so it is more readable.