diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 54cfbc7da..e4c88b3d3 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -58,6 +58,32 @@ import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => Disabled;
```
+## Sizes
+
+Use the `size` attribute to change a checkbox's size.
+
+```html preview
+Small
+
+Medium
+
+Large
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+ <>
+ Small
+
+ Medium
+
+ Large
+
+);
+```
+
### Custom Validity
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 58aa5e39e..003260d40 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -78,4 +78,28 @@ const App = () => (
);
```
+## Sizes
+
+Use the `size` attribute to change a radio's size.
+
+```html preview
+Small
+Medium
+Large
+```
+
+```jsx react
+import { SlRadio } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+ <>
+ Small
+
+ Medium
+
+ Large
+
+);
+```
+
[component-metadata:sl-radio]
diff --git a/docs/components/switch.md b/docs/components/switch.md
index 01202ab97..60009bb1f 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -44,12 +44,38 @@ import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => Disabled;
```
-### Custom Size
+## Sizes
-Use the available custom properties to make the switch a different size.
+Use the `size` attribute to change a switch's size.
```html preview
-Really big
+Small
+
+Medium
+
+Large
+```
+
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+ <>
+ Small
+
+ Medium
+
+ Large
+
+);
+```
+
+### Custom Styles
+
+Use the available custom properties to change how the switch is styled.
+
+```html preview
+Really big
```
```jsx react
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 1e1b887b7..c89885778 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,12 +10,17 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
+- 🚨 BREAKING: changed the default size of medium checkboxes, radios, and switches to 18px instead of 16px
+- 🚨 BREAKING: renamed the `--sl-toggle-size` design token to `--sl-toggle-size-medium`
+- Added the `--sl-toggle-size-small` and `--sl-toggle-size-large` design tokens
+- Added the `size` attribute to ``, ``, and `` [#1071](https://github.com/shoelace-style/shoelace/issues/1071)
- Added the `sl-input` event to ``, ``, ``, ``, and ``
- Fixed a bug in `` that sometimes prevented the color from updating when clicking or tapping on the controls
- Fixed a bug in `` that prevented text from being entered in the color input
- Fixed a bug in `` that caused the `sl-change` event to be incorrectly emitted when the value was set programmatically [#917](https://github.com/shoelace-style/shoelace/issues/917)
- Fixed a bug in `` and `` that made it impossible to disable spell checking [#1061](https://github.com/shoelace-style/shoelace/issues/1061)
- Fixed non-modal behaviors in `` when using the `contained` attribute [#1051](https://github.com/shoelace-style/shoelace/issues/1051)
+- Fixed a bug in `` and `` that caused the checked icons to not scale property when resized
- Removed the `formdata` event polyfill since it's now available in the last two versions of all major browsers
## 2.0.0-beta.86
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index bf420dda1..98ca1b0c0 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -12,21 +12,35 @@ export default css`
display: inline-flex;
align-items: top;
font-family: var(--sl-input-font-family);
- font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-color);
vertical-align: middle;
cursor: pointer;
}
+ .checkbox--small {
+ --toggle-size: var(--sl-toggle-size-small);
+ font-size: var(--sl-input-font-size-small);
+ }
+
+ .checkbox--medium {
+ --toggle-size: var(--sl-toggle-size-medium);
+ font-size: var(--sl-input-font-size-medium);
+ }
+
+ .checkbox--large {
+ --toggle-size: var(--sl-toggle-size-large);
+ font-size: var(--sl-input-font-size-large);
+ }
+
.checkbox__control {
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
- width: var(--sl-toggle-size);
- height: var(--sl-toggle-size);
+ width: var(--toggle-size);
+ height: var(--toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-radius: 2px;
background-color: var(--sl-input-background-color);
@@ -43,10 +57,11 @@ export default css`
pointer-events: none;
}
- .checkbox__control .checkbox__icon {
+ .checkbox__checked-icon,
+ .checkbox__indeterminate-icon {
display: inline-flex;
- width: var(--sl-toggle-size);
- height: var(--sl-toggle-size);
+ width: var(--toggle-size);
+ height: var(--toggle-size);
}
/* Hover */
@@ -91,7 +106,7 @@ export default css`
.checkbox__label {
display: inline-block;
color: var(--sl-input-label-color);
- line-height: var(--sl-toggle-size);
+ line-height: var(--toggle-size);
margin-inline-start: 0.5em;
user-select: none;
}
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 2d68c9e4f..4e75bed47 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -58,6 +58,9 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
/** The current value of the checkbox, submitted as a name/value pair with form data. */
@property() value: string;
+ /** The checkbox's size. */
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
/** Disables the checkbox. */
@property({ type: Boolean, reflect: true }) disabled = false;
@@ -158,7 +161,10 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
'checkbox--checked': this.checked,
'checkbox--disabled': this.disabled,
'checkbox--focused': this.hasFocus,
- 'checkbox--indeterminate': this.indeterminate
+ 'checkbox--indeterminate': this.indeterminate,
+ 'checkbox--small': this.size === 'small',
+ 'checkbox--medium': this.size === 'medium',
+ 'checkbox--large': this.size === 'large'
})}
>
- ${this.checked ? html` ` : ''}
+ ${this.checked
+ ? html`
+
+ `
+ : ''}
${!this.checked && this.indeterminate
- ? html` `
+ ? html`
+
+ `
: ''}
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 2d8509eef..659845b54 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -23,15 +23,25 @@ export default css`
cursor: pointer;
}
- .radio__icon {
- display: inline-flex;
- width: var(--sl-toggle-size);
- height: var(--sl-toggle-size);
+ .radio--small {
+ --toggle-size: var(--sl-toggle-size-small);
+ font-size: var(--sl-input-font-size-small);
}
- .radio__icon svg {
- width: 100%;
- height: 100%;
+ .radio--medium {
+ --toggle-size: var(--sl-toggle-size-medium);
+ font-size: var(--sl-input-font-size-medium);
+ }
+
+ .radio--large {
+ --toggle-size: var(--sl-toggle-size-large);
+ font-size: var(--sl-input-font-size-large);
+ }
+
+ .radio__checked-icon {
+ display: inline-flex;
+ width: var(--toggle-size);
+ height: var(--toggle-size);
}
.radio__control {
@@ -40,8 +50,8 @@ export default css`
display: inline-flex;
align-items: center;
justify-content: center;
- width: var(--sl-toggle-size);
- height: var(--sl-toggle-size);
+ width: var(--toggle-size);
+ height: var(--toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-radius: 50%;
background-color: var(--sl-input-background-color);
@@ -97,7 +107,7 @@ export default css`
.radio__label {
display: inline-block;
color: var(--sl-input-label-color);
- line-height: var(--sl-toggle-size);
+ line-height: var(--toggle-size);
margin-inline-start: 0.5em;
user-select: none;
}
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index d72eddef3..f5c64806a 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -36,6 +36,9 @@ export default class SlRadio extends ShoelaceElement {
/** The radio's value. When selected, the radio group will receive this value. */
@property() value: string;
+ /** The radio's size. */
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
/** Disables the radio. */
@property({ type: Boolean, reflect: true }) disabled = false;
@@ -92,11 +95,16 @@ export default class SlRadio extends ShoelaceElement {
radio: true,
'radio--checked': this.checked,
'radio--disabled': this.disabled,
- 'radio--focused': this.hasFocus
+ 'radio--focused': this.hasFocus,
+ 'radio--small': this.size === 'small',
+ 'radio--medium': this.size === 'medium',
+ 'radio--large': this.size === 'large'
})}
>
- ${this.checked ? html` ` : ''}
+ ${this.checked
+ ? html` `
+ : ''}
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 72a91e434..a165ca695 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -5,18 +5,38 @@ export default css`
${componentStyles}
:host {
- --height: var(--sl-toggle-size);
- --thumb-size: calc(var(--sl-toggle-size) + 4px);
+ display: inline-block;
+ }
+
+ :host([size='small']) {
+ --height: var(--sl-toggle-size-small);
+ --thumb-size: calc(var(--sl-toggle-size-small) + 4px);
--width: calc(var(--height) * 2);
- display: inline-block;
+ font-size: var(--sl-input-font-size-small);
+ }
+
+ :host([size='medium']) {
+ --height: var(--sl-toggle-size-medium);
+ --thumb-size: calc(var(--sl-toggle-size-medium) + 4px);
+ --width: calc(var(--height) * 2);
+
+ font-size: var(--sl-input-font-size-medium);
+ }
+
+ :host([size='large']) {
+ --height: var(--sl-toggle-size-large);
+ --thumb-size: calc(var(--sl-toggle-size-large) + 4px);
+ --width: calc(var(--height) * 2);
+
+ font-size: var(--sl-input-font-size-large);
}
.switch {
display: inline-flex;
align-items: center;
font-family: var(--sl-input-font-family);
- font-size: var(--sl-input-font-size-medium);
+ font-size: inherit;
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-color);
vertical-align: middle;
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 87e202994..28c8fb9a5 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -56,6 +56,9 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
/** The current value of the switch, submitted as a name/value pair with form data. */
@property() value: string;
+ /** The switch's size. */
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
/** Disables the switch. */
@property({ type: Boolean, reflect: true }) disabled = false;
@@ -159,7 +162,10 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
switch: true,
'switch--checked': this.checked,
'switch--disabled': this.disabled,
- 'switch--focused': this.hasFocus
+ 'switch--focused': this.hasFocus,
+ 'switch--small': this.size === 'small',
+ 'switch--medium': this.size === 'medium',
+ 'switch--large': this.size === 'large'
})}
>