Skip to content

Checkbox control always sets the "readonly" attribute, which disables form validation #4402

Open
@ilmiont

Description

@ilmiont

Bug Report

Steps

The Checkbox control is hardcoded to always set readOnly on its Input, even if you don't pass the readOnly prop.

This means the element is always in the readonly state, which causes HTML validation to always pass, even if the element is actually in an invalid state (e.g. being required).

Expected Result

It should be possible to use required with a Checkbox component and have form validation and methods such as checkValidity() work correctly.

Actual Result

Expected form validation does not occur because the element is in the readonly state. This allows a user to submit a form without checking a required value, even when you've set the required prop.

Version

2.1.3

Testcase

https://codesandbox.io/s/semantic-ui-react-checkbox-is-always-readonly-oyeow5

Activity

welcome

welcome commented on Dec 6, 2022

@welcome

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

maltesa

maltesa commented on Jun 21, 2023

@maltesa

Would be great if that could be solved. Currently I'm working around the issue like this:

<Checkbox
  required
  name="termsAccepted"
  // @ts-ignore: remove readonly attribute to enable browser validation
  ref={(e) => e.inputRef.current?.removeAttribute('readonly')}
  // ...
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @maltesa@ilmiont

      Issue actions

        Checkbox control always sets the "readonly" attribute, which disables form validation · Issue #4402 · Semantic-Org/Semantic-UI-React