Day 22: Checkbox 🧦
A checkbox component is a form item used when multiple selectable objects are in a list.
The example component is visible below.
A few notes about this notification component:
- CSS Variables are used for colors and spacing,
- CSS Flexbox is used for layout,
- the
before
andafter
components are used to style the checkbox, - the
:checked
selector is used to determine if the checkbox is checked, - the
~
sibling selector is used to target the sibling label, - the inline SVG is used to add a custom checkbox.
The code:
<div class="advent-checkbox">
<input type="checkbox" id="checkbox1" name="checkbox1" checked>
<label for="checkbox1">Christmas tree 🎄</label>
</div>
<div class="advent-checkbox">
<input type="checkbox" id="checkbox2" name="checkbox2" checked>
<label for="checkbox2">Fireplace 🔥</label>
</div>
<div class="advent-checkbox">
<input type="checkbox" id="checkbox3" name="checkbox3" checked>
<label for="checkbox3">Socks 🧦</label>
</div>
.advent-checkbox {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--size-xmas: 1em;
position: relative;
margin-bottom: var(--size-xmas);
padding: calc(var(--size-xmas) / 6) calc(var(--size-xmas) / 3);
overflow: hidden;
}
.advent-checkbox input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.advent-checkbox label {
color: var(--color-xmas-beta);
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
}
.advent-checkbox input[type="checkbox"]:checked ~ label {
color: var(--color-xmas-gamma);
}
.advent-checkbox label:before,
.advent-checkbox label:after {
content: "";
display: inline-block;
min-height: var(--size-xmas);
min-width: var(--size-xmas);
}
.advent-checkbox label:before {
background-color: var(--color-xmas-alpha);
border: 1px solid currentColor;
border-radius: calc(var(--size-xmas) / 4);
margin-right: calc(var(--size-xmas) / 2);
}
.advent-checkbox label:after {
background-position: center;
background-repeat: no-repeat;
background-size: calc(var(--size-xmas) / 2);
position: absolute;
left: 0;
}
.advent-checkbox input[type="checkbox"]:checked ~ label:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
}
.advent-checkbox input[type="checkbox"]:focus ~ label:before {
outline: 1px solid currentColor;
outline-offset: calc(var(--size-xmas) / 4);
}
Advent of UI Components 🎄
Check other UI Components.
Day 24: Details 🎹
A details component contains the summary and the complete information, which could be toggled between visible and hidden states.
Day 23: Radio 📱
A radio component is a form item used when only one selection is possible in a group of mutually exclusive choices.
Day 22: Checkbox 🧦
A checkbox component is a form item used when multiple selectable objects are in a list.
Day 21: Notification 🤫
A notification component usually displays a message that communicates information to the user.
Day 20: Code block 💻
A code block UI component represents a block of code that is formatted neatly.
Day 19: Pagination 📖
Pagination helps users browse through the sequence of related content.
Day 18: Social share 🔗
A social share is a component that displays anchors holding social sharing links of a current page.
Day 17: Card 🎴
A card component usually displays an image and extra information in card-like format.
Day 16: Table 🎶
A table is used to display tabular data.
Day 15: Breadcrumb 🍞
A breadcrumb is an element that helps users understand the hierarchy of the page and site.
Day 14: Blockquote 💬
A blockquote is used to highlight a quote on a page.
Day 13: List 🗒️
An (unordered) list usually consists of items displayed as bullets.
Day 12: Figure 🖼️
A figure element represents a graphic asset with an optional caption.
Day 11: Video Embed 📺
A video embed is a code snippet that allows us to embed the video from a third-party platform like YouTube or Video to our site.
Day 10: Footer 👇
A footer is a component that sits at the bottom of every page. It usually consists of navigation and additional information, like website copyright and legal links.
Day 9: Header ☝️
A header usually consists of navigation that has links to different parts of the website.
Day 8: Hero 🦸♂️
A hero component usually displays the page title, description, and, sometimes, a CTA.
Day 7: Intro 💬
An intro components usually provides basic information of the page. It is one of the first components on the page.
Day 6: Horizontal Rule 〰️
A horizontal rule is usually used as a visual divider between two textual elements.
Day 5: Split 💔
A split component consists of two elements, usually image and text, sitting next to each other horizontally.
Day 4: Banner 🚩
A banner is an element that serves to highlight information, like a website page or an event or Advent of UI Components.
Day 3: Gallery 🍿
Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
Day 2: Tag 🎁
Tags often represent information like category, state, or additional information.
Day 1: Button 🎅
Let's start with a classic button. Every website needs one, right?