<div class="o-stack o-stack--align-center o-stack--8">
<!-- Small -->
<div
class="c-textfield c-textfield--icon c-textfield--small"
>
<input
class="c-textfield__input"
type="text"
placeholder="Small input"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<!-- Medium -->
<div
class="c-textfield c-textfield--icon c-textfield--medium"
>
<input
class="c-textfield__input"
type="text"
placeholder="Medium input"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<!-- Default -->
<div class="c-textfield c-textfield--icon">
<input
class="c-textfield__input"
type="text"
placeholder="Default input"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<!-- Large -->
<div
class="c-textfield c-textfield--icon c-textfield--large"
>
<input
class="c-textfield__input"
type="text"
placeholder="Large input"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
</div><div class="o-stack o-stack--align-center o-stack--8">
<!-- Tiny -->
<div class="c-textfield c-textfield--width-tiny">
<input
class="c-textfield__input"
type="text"
placeholder="Tiny"
/>
</div>
<!-- Extra small -->
<div class="c-textfield c-textfield--width-extra-small">
<input
class="c-textfield__input"
type="text"
placeholder="XS"
/>
</div>
<!-- Small -->
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="text"
placeholder="Small"
/>
</div>
<!-- Default -->
<div class="c-textfield c-textfield--width-normal">
<input
class="c-textfield__input"
type="text"
placeholder="Normal"
/>
</div>
<!-- Large -->
<div class="c-textfield c-textfield--width-large">
<input
class="c-textfield__input"
type="text"
placeholder="Large"
/>
</div>
<!-- Fill -->
<div class="o-stack__item o-stack__item--flexible">
<div class="c-textfield c-textfield--width-fill">
<input
class="c-textfield__input"
type="text"
placeholder="Fill"
/>
</div>
</div>
</div><div
class="o-stack o-stack--vertical o-stack--8 o-stack--align-start"
>
<!-- Textfields and buttons -->
<div class="c-field-group c-field-group--merged">
<button class="c-button c-button--icon-only">
<span class="c-button__icon c-icon c-icon--small">
<!-- SVG element -->
</span>
</button>
<div
class="c-textfield c-textfield--icon c-textfield--width-normal"
>
<input
class="c-textfield__input"
type="text"
value="Text input"
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="text"
value="Input 2"
/>
</div>
<button class="c-button c-button--icon-only">
<span class="c-button__icon c-icon c-icon--small">
<!-- SVG element -->
</span>
</button>
</div>
<!-- Textfield and addons -->
<div class="c-field-group c-field-group--merged">
<div class="c-field-addon">€</div>
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="text"
value="100,00"
readonly
/>
</div>
<div class="c-field-addon">Addon</div>
</div>
</div><div class="o-stack o-stack--align-center o-stack--8">
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="number"
type="number"
value="1"
/>
</div>
<div class="c-textfield c-textfield--width-normal">
<input
class="c-textfield__input"
type="date"
type="date"
value="2024-01-01"
/>
</div>
</div><div class="o-stack o-stack--vertical o-stack--8">
<div class="o-stack o-stack--12 o-stack--align-center">
<div style="width: 10rem">Month picker</div>
<div class="c-field-group c-field-group--merged">
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="text"
value="2025.5"
/>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-period-picker">
<div class="c-period-picker__content">
<div class="c-period-picker__year">
<div class="c-period-picker__label">
2024
</div>
<div
class="c-period-picker__choices c-period-picker__choices--months"
>
<button
type="button"
class="c-period-picker__choice"
>
7
</button>
<button
type="button"
class="c-period-picker__choice"
>
8
</button>
<button
type="button"
class="c-period-picker__choice"
>
9
</button>
<button
type="button"
class="c-period-picker__choice"
>
10
</button>
<button
type="button"
class="c-period-picker__choice"
>
11
</button>
<button
type="button"
class="c-period-picker__choice"
>
12
</button>
</div>
</div>
<div
class="c-period-picker__year c-period-picker__year--current"
>
<div class="c-period-picker__label">
2025
</div>
<div
class="c-period-picker__choices c-period-picker__choices--months"
>
<button
type="button"
class="c-period-picker__choice"
>
1
</button>
<button
type="button"
class="c-period-picker__choice"
>
2
</button>
<button
type="button"
class="c-period-picker__choice"
>
3
</button>
<button
type="button"
class="c-period-picker__choice"
>
4
</button>
<button
type="button"
class="c-period-picker__choice c-period-picker__choice--active"
>
5
</button>
<button
type="button"
class="c-period-picker__choice"
>
6
</button>
<button
type="button"
class="c-period-picker__choice"
>
7
</button>
<button
type="button"
class="c-period-picker__choice"
>
8
</button>
<button
type="button"
class="c-period-picker__choice"
>
9
</button>
<button
type="button"
class="c-period-picker__choice"
>
10
</button>
<button
type="button"
class="c-period-picker__choice"
>
11
</button>
<button
type="button"
class="c-period-picker__choice"
>
12
</button>
</div>
</div>
<div class="c-period-picker__year">
<div class="c-period-picker__label">
2026
</div>
<div
class="c-period-picker__choices c-period-picker__choices--months"
>
<button
type="button"
class="c-period-picker__choice"
>
1
</button>
<button
type="button"
class="c-period-picker__choice"
>
2
</button>
<button
type="button"
class="c-period-picker__choice"
>
3
</button>
<button
type="button"
class="c-period-picker__choice"
>
4
</button>
<button
type="button"
class="c-period-picker__choice"
>
5
</button>
<button
type="button"
class="c-period-picker__choice"
>
6
</button>
</div>
</div>
</div>
<div class="c-period-picker__navigation">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only c-period-picker__navigation-button"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only c-period-picker__navigation-button"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-stack o-stack--12 o-stack--align-center">
<div style="width: 10rem">Quarter picker</div>
<div class="c-field-group c-field-group--merged">
<div class="c-textfield c-textfield--width-small">
<input
class="c-textfield__input"
type="text"
value="2025.3"
/>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-period-picker">
<div class="c-period-picker__content">
<div class="c-period-picker__year">
<div class="c-period-picker__label">
2024
</div>
<div
class="c-period-picker__choices c-period-picker__choices--quarters"
>
<button
type="button"
class="c-period-picker__choice"
>
1
</button>
<button
type="button"
class="c-period-picker__choice"
>
2
</button>
<button
type="button"
class="c-period-picker__choice"
>
3
</button>
<button
type="button"
class="c-period-picker__choice"
>
4
</button>
</div>
</div>
<div
class="c-period-picker__year c-period-picker__year--current"
>
<div class="c-period-picker__label">
2025
</div>
<div
class="c-period-picker__choices c-period-picker__choices--quarters"
>
<button
type="button"
class="c-period-picker__choice"
>
1
</button>
<button
type="button"
class="c-period-picker__choice"
>
2
</button>
<button
type="button"
class="c-period-picker__choice c-period-picker__choice--active"
>
3
</button>
<button
type="button"
class="c-period-picker__choice"
>
4
</button>
</div>
</div>
<div class="c-period-picker__year">
<div class="c-period-picker__label">
2026
</div>
<div
class="c-period-picker__choices c-period-picker__choices--quarters"
>
<button
type="button"
class="c-period-picker__choice"
>
1
</button>
<button
type="button"
class="c-period-picker__choice"
>
2
</button>
<button
type="button"
class="c-period-picker__choice"
>
3
</button>
<button
type="button"
class="c-period-picker__choice"
>
4
</button>
</div>
</div>
</div>
<div class="c-period-picker__navigation">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only c-period-picker__navigation-button"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only c-period-picker__navigation-button"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>