csslayout/contents/radio-switch.mdx

---
category: Input
created: '2019-11-24'
description: Create a radio switch with CSS flexbox
keywords: css flexbox, css radio switch, css switch
thumbnail: /assets/css-layout/thumbnails/radio-switch.png
title: Radio switch
---

## HTML

```html index.html
<div class="radio-switch">
    <!-- Radio container -->
    <label class="radio-switch__label radio-switch__label--selected">
        <input type="radio" class="radio-switch__input" />

        <!-- Text -->
        ...
    </label>

    <!-- Other radio item -->
    ...
</div>
```

## CSS

```css styles.css
.radio-switch {
    background-color: #d1d5db;
    border-radius: 9999px;
    display: inline-flex;
    padding: 0.25rem;
}

.radio-switch__label {
    border-radius: 9999px;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.radio-switch__label--selected {
    /* For selected radio only */
    background-color: #3b82f6;
    color: #fff;
}

.radio-switch__input {
    display: none;
}
```

<Playground>
```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}

.radio-switch {
    background-color: #d1d5db;
    border-radius: 9999px;
    display: inline-flex;
    padding: 0.25rem;
}

.radio-switch__label {
    border-radius: 9999px;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.radio-switch__label--selected {
    /* For selected radio only */
    background-color: #3b82f6;
    color: #fff;
}

.radio-switch__input {
    display: none;
}
```

```html index.html hidden
<div class="radio-switch">
    <label class="radio-switch__label">
        <input type="radio" class="radio-switch__input" /> Monthly
    </label>
    <label class="radio-switch__label radio-switch__label--selected">
        <input type="radio" class="radio-switch__input" /> Yearly
    </label>
</div>
```
</Playground>