Toggle: add "name" prop

This commit is contained in:
Alex Gleason 2023-03-31 11:50:32 -05:00
parent 6f48d6500d
commit d7cb52c40c
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -1,12 +1,12 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'checked' | 'onChange' | 'required' | 'disabled'> { interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
size?: 'sm' | 'md' size?: 'sm' | 'md'
} }
/** A glorified checkbox. */ /** A glorified checkbox. */
const Toggle: React.FC<IToggle> = ({ id, size = 'md', checked, onChange, required, disabled }) => { const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked, onChange, required, disabled }) => {
const input = useRef<HTMLInputElement>(null); const input = useRef<HTMLInputElement>(null);
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => { const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
@ -39,6 +39,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', checked, onChange, require
<input <input
id={id} id={id}
ref={input} ref={input}
name={name}
type='checkbox' type='checkbox'
className='sr-only' className='sr-only'
checked={checked} checked={checked}