Emotion: How do you create different types of input elements?

[geuis]

This isn't explained anywhere that I can find.

This works:

export const checkbox = styled.input``; 

But then how do you specify that the input is a checkbox, text, radio, etc?

[probablyup]

For this situation, you'd probably want to use recompose's withProps HOC. This lets you set the type prop, etc ahead of time:

export const Checkbox = withProps({ type: 'checkbox' })(styled.input`
  border: 1px blue;
`);

Here's the emotion doc page on the subject: https://github.com/emotion-js/emotion/blob/86b4a61d0db7446f9aab60ecd70d76b2453c9f26/docs/with-props.md#usage-with-recomposes-withprops

[greggb]

Your styled component accepts props just like any other React Component.

const CheckBox = styled('input')`
  transform: scale(4);
`
<CheckBox type="checkbox"/>