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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions