Radios

Setup

Radios styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.radio.css" />

Default

<input type="radio" id="1" name="default" checked />
<input type="radio" id="2" name="default" />

Utilities

Radios accept Manifest utility classes, which can be stacked in any combination.

Colors

<!-- Brand variant -->
<input type="radio" id="primary" class="brand" name="colors" checked />

<!-- Accent variant -->
<input type="radio" id="accent" class="accent" name="colors" />

<!-- Positive variant -->
 <input type="radio" id="positive" class="positive" name="colors-preview" />

<!-- Negative variant -->
<input type="radio" id="negative" class="negative" name="colors" />

Size

<!-- Small variant -->
<input type="radio" id="small" class="sm" name="sizes" checked />

<!-- Large variant -->
<input type="radio" id="large" class="lg" name="sizes" />

Outlined

<!-- Border variant -->
<input type="radio" id="outlined" class="outlined" name="outlines" checked />

<!-- Combined with colors -->
<input type="radio" id="outlined-brand" class="outlined brand" name="outlines" />
<input type="radio" id="outlined-accent" class="outlined accent" name="outlines" />
<input type="radio" id="outlined-positive" class="outlined positive" name="outlines" />
<input type="radio" id="outlined-negative" class="outlined negative" name="outlines" />

Form Layouts

Labels

Placing the radio and text inside a <label> automatically arranges them in a row.

<label>
    <input type="radio" id="a" name="labelled" checked />
    Option A
</label>
<label>
    <input type="radio" id="b" name="labelled" />
    Option B
</label>

Groups

Placing labelled radios inside a <fieldset> automatically arranges them in a column with a gap.

<fieldset>
    <label>
        <input type="radio" id="option-a" name="group" checked />
        Option A
    </label>
    <label>
        <input type="radio" id="option-b" name="group" />
        Option B
    </label>
    <label>
        <input type="radio" id="option-c" name="group" />
        Option C
    </label>
</fieldset>

Styles

Theme

Default radios use the following theme variables:

Variable	Purpose
`--color-field-surface`	Radio background
`--color-field-surface-hover`	Radio background on hover
`--color-field-inverse`	Radio icon color
`--spacing-field-height`	Radio size
`--transition`	Transition for interactive states

Customization

Modify base radio styles with custom CSS for the input[type=radio] selector.

input[type=radio] {
    background-color: #f0f8ff;
    border: 2px solid #3b82f6;
    border-radius: 50%;

    /* Notched */ 
    &::after {
        background-color: #1e40af;
        border-radius: 50%;
    }
}