Why radio input component doesn't work?
Why radio input doesn't work?
RadioButton.tsx
I have no errors or warnings - it just doesn't work - I click on radio button and nothing hapenning
Any ideas why?
import { ChangeEvent } from "react"
interface RadioButton extends React.HTMLAttributes<HTMLInputElement> {
label: string
inputName: string
onChange: (e: ChangeEvent<HTMLInputElement>) => void
}
export function RadioButton({ label, inputName, onChange, ...props }: RadioButton) {
return (
<label htmlFor={label} className="relative cursor-pointer flex items-center group">
<input type="radio" name={inputName} value={label} className="hidden" onChange={(e) => onChange(e)} {...props} />
<span
className={`label relative block float-left mr-[10px] w-[20px] h-[20px]
rounded-[50%] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:w-[10px] after:h-[10px] after:rounded-[50%]
after:scale-0 after:transition-all after:duration-200 after:opacity-10 after:pointer-events-none
group-hover:after:scale-[3.6]`}
/>
{label}
</label>
)
}
import { ChangeEvent } from "react"
interface RadioButton extends React.HTMLAttributes<HTMLInputElement> {
label: string
inputName: string
onChange: (e: ChangeEvent<HTMLInputElement>) => void
}
export function RadioButton({ label, inputName, onChange, ...props }: RadioButton) {
return (
<label htmlFor={label} className="relative cursor-pointer flex items-center group">
<input type="radio" name={inputName} value={label} className="hidden" onChange={(e) => onChange(e)} {...props} />
<span
className={`label relative block float-left mr-[10px] w-[20px] h-[20px]
rounded-[50%] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:w-[10px] after:h-[10px] after:rounded-[50%]
after:scale-0 after:transition-all after:duration-200 after:opacity-10 after:pointer-events-none
group-hover:after:scale-[3.6]`}
/>
{label}
</label>
)
}
const [label1, setLabel1] = useState('');
const [label2, setLabel2] = useState('');
<RadioButton label="label1" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
<RadioButton label="label2" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
<RadioButton label="label3" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
<RadioButton label="label4" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
<p>{label1}</p>
<p>{label2}</p>
const [label1, setLabel1] = useState('');
const [label2, setLabel2] = useState('');
<RadioButton label="label1" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
<RadioButton label="label2" inputName="input-name1" onChange={e => setLabel1(e.target.value)} />
<RadioButton label="label3" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
<RadioButton label="label4" inputName="input-name2" onChange={e => setLabel2(e.target.value)} />
<p>{label1}</p>
<p>{label2}</p>
1 Reply
I did it
If somebody need
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
isChecked: boolean
onChange: () => void
label: string
labelClassName?: string
}
export function Checkbox({ isChecked = false, onChange, label, labelClassName = "", ...props }: CheckboxProps) {
return (
<div className="checkbox-container">
<input
className="cursor-pointer bg-primary-dark"
type="checkbox"
id="check"
checked={isChecked}
onChange={onChange}
{...props}
/>
<label className={`${labelClassName} select-none cursor-pointer`} onClick={onChange}>
{label}
</label>
</div>
)
}
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
isChecked: boolean
onChange: () => void
label: string
labelClassName?: string
}
export function Checkbox({ isChecked = false, onChange, label, labelClassName = "", ...props }: CheckboxProps) {
return (
<div className="checkbox-container">
<input
className="cursor-pointer bg-primary-dark"
type="checkbox"
id="check"
checked={isChecked}
onChange={onChange}
{...props}
/>
<label className={`${labelClassName} select-none cursor-pointer`} onClick={onChange}>
{label}
</label>
</div>
)
}