Read-only Inputs: Checkbox Implementation
See original GitHub issueReference #12241
Acceptance Criteria
- Coded component in
/package/react
- Add a prop for read-only, add styles for said prop
- Controls for each state in playground
- Default story for easy copy and paste
- RTL tests for the read-only class on the prop
Issue Analytics
- State:
- Created a year ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Can HTML checkboxes be set to readonly? - Stack Overflow
It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field....
Read more >Semantic-UI Checkbox Read-only State - GeeksforGeeks
Example 1: This example demonstrates the checkbox read-only state using the read-only class . It displays both the true and false condition ...
Read more >How to make checkbox readonly in javascript? - CodeProject
Hello, Friend try this JQuery $(document).ready(function(){ if($('#s:checked').length){ $('#sr').attr('readonly',true); // On Load, ...
Read more ><input type="checkbox"> - HTML: HyperText Markup Language
In this example, we've got a name of subscribe , and a value of newsletter . When the form is submitted, the data...
Read more >HTML input readonly Attribute - W3Schools
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I personally don’t think we need read-only tokens. I think using a mix of regular and disabled color tokens in this context is acceptable. If the style ever diverges, we can make a specific one. Its only used in a few read-only components. We could make a whole suite of read-only tokens but I think that is overkill.
@lee-chase I’ll jump in and try to answer some of these questions.
We apply VRT to each story in the storybook. By having a dedicated story titled “readonly” we can ensure there are no visual regressions over time. I’m really either/or on this one though - we don’t usually have specific stories for other states like
invalid
. This could be a follow-on item later. For now it can be a control on the “playground” story imoMy guess is no, we won’t add these as tokens. Adding tokens has lots of implications across the system. Ultimately this is a question for design though, @aagonzales what are your thoughts?
Story files should import an .mdx file that corresponds to the “docs” tab in storybook. This .mdx file will need updated to include the readonly story as well as light docs on how/when to use the readonly prop/variant.
Yeah I think the standard attribute should be used here where possible, following convention of how we use other standard attributes like
title
. I think it should be listed as a prop and probably just have a proptype ofbool
.