Skip to content

Instantly share code, notes, and snippets.

@mnirfan

mnirfan/RadioButton.tsx

Last active March 21, 2025 07:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mnirfan/5d7f7bb1e26ec70d3d9f1025cdbfc44a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mnirfan/5d7f7bb1e26ec70d3d9f1025cdbfc44a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RadioButton.tsx
import './styles.css';
interface RadioButtonProps {
checked: boolean;
text: string;
onChecked: () => void;
}
export const RadioButton = ({ checked, text, onChecked }: RadioButtonProps) => {
return (
<view
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
bindtap={() => onChecked()}
>
<view className='radio'>
<view className={`radio-inner ${checked ? 'filled' : ''}`} />
</view>
<view>
<text className='text'>
{text}
</text>
</view>
</view>
)
}
Raw
styles.css
.radio {
margin: 0 8px 0 0;
height: 24px;
width: 24px;
border-radius: 50%;
border: 0.2rem solid teal;
padding: 4px;
background-color: transparent;
}
.radio-inner {
height: 100%;
width: 100%;
background-color: transparent;
border-radius: 50%;
}
.filled {
background-color: teal;
}
.text {
font-size: 1rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment