WebTUI

Displays a radio button

1	<label>
2	<input type="radio" name="radio-group" />
3	Unchecked
4	</label>
5	<label>
6	<input type="radio" checked name="radio-group" />
7	Checked
8	</label>

Import

@import '@webtui/css/components/radio.css';

<label>
    <input type="radio" />
    Radio
</label>

1
2	<label>
3	<input type="radio" disabled name="radio-group" />
4	Disabled
5	</label>
6	<label>
7	<input type="radio" checked disabled name="radio-group" />
8	Checked Disabled
9	</label>
10

--placeholder-content: The content of the unchecked radio placeholder
--placeholder-background: The background color of the unchecked radio placeholder
--placeholder-color: The text color of the unchecked radio placeholder
--checked-content: The content of the radio button when checked
--checked-background: The background color of the radio button when checked
--checked-color: The text color of the radio button when checked

1
2	<label>
3	<input type="radio" name="default" />
4	Default
5	</label>
6	<label>
7	<input type="radio" checked name="default" />
8	Default Checked
9	</label><br/>
10	<label>
11	<input type="radio" class="custom" name="custom" />
12	Custom
13	</label>
14	<label>
15	<input type="radio" checked class="custom" name="custom" />
16	Custom Checked
17	</label>
18

1
2	input[type='radio'].custom {
3	--placeholder-content: '< >';
4	--placeholder-background: var(--background2);
5	--placeholder-color: var(--foreground1);
6	--checked-content: 'O';
7	--checked-color: red;
8	}
9

To extend the Radio stylesheet, define a CSS rule on the components layer

@layer components {
    input[type='radio'] {
        /* ... */
    }
}

input[type='radio'] {
    /* ... */
}