Add Checkbox form component #1606
Conversation
🦋 Changeset detectedLatest commit: 3f1f8b8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
rezrah
changed the title
…e-checkbox-form-component
…e-checkbox-form-component
| aria-disabled={disabled ? 'true' : 'false'} | ||
| ref={ref || checkboxRef} | ||
| checked={indeterminate ? false : checked} | ||
| aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'} |
| /** | ||
| * An accessible, native checkbox component | ||
| */ | ||
| const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>( |
There was a problem hiding this comment.
Why do we need to use forwardRef?
There was a problem hiding this comment.
It's there to make the checkbox more flexible when used in uncontrolled mode.
| @@ -169,4 +169,7 @@ export type {TruncateProps} from './Truncate' | |||
| export {default as UnderlineNav} from './UnderlineNav' | |||
| export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav' | |||
|
|
|||
| export {default as Checkbox} from './Checkbox' | |||
There was a problem hiding this comment.
Any ideas how we could guard against engineers rendering a <Checkbox /> without a corresponding <label />?
I have some ideas, but it would be much easier to show over Zoom instead of text and pseudocode. Let me know if you want to chat on Monday.
There was a problem hiding this comment.
Chatted with @rezrah about this: we're just going to check for an associated label with a linter instead of doing anything in the runtime.
docs/content/Checkbox.md
Outdated
|
|
||
| import {ComponentChecklist} from '../src/component-checklist' | ||
|
|
||
| `Checkbox` is a form component that applies Primer design language to a native HTML checkbox input element. |
There was a problem hiding this comment.
Could we move this into the description frontmatter and reword it to be a little more actionable (see other component descriptions):
---
title: Checkbox
description: Use checkboxes to ...
---
There was a problem hiding this comment.
Moved and content updated 👍
Checkbox ✅
Adds a native
Checkboxcomponent that provides a react abstraction over a native HTML checkbox inputAdapted from the Primer design guidelines for checkboxes
Before:
<input type="checkbox" />After:
<Checkbox />Try it here
Docs: https://primer-components-eo45yjh4t-primer.vercel.app/react/Checkbox
Storybook: https://primer-components-eo45yjh4t-primer.vercel.app/react/storybook?path=/story/forms-checkbox--default
Screenshots
Merge checklist
Resolves https://github.com/github/primer/issues/467
Contributes towards: https://github.com/github/primer/issues/432