checked doesn't exist on HTMLAttributes<HTMLInputElement>

Adeola 0
Viewed 17

Please, I don't know why this is not working. It's practically telling me that "checked" doesn't exist on the input element.

interface RadioProps extends HTMLAttributes<HTMLInputElement> {
  size?: "xs" | "sm" | "md" | "lg";
}

const RadioInput = (props: RadioProps) => <Wrapper size={size}>
  <input id={id} {...props} type="radio" />
  <label htmlFor={props.id || id} size={size}></Label>
</Wrapper>

const App = () => <RadioInput checked={checked} />

// Error: Property 'checked' does not exist on type 'IntrinsicAttributes & RadioProps'
reactjs typescript
1 Answers

instead of

HTMLAttributes<HTMLInputElement>

you can use

React.DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

in this case, your custom interface for your component will be like this

    interface RadioProps extends React.DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
        size?: "xs" | "sm" | "md" | "lg";
    }
Javlonbek0
Related