2.1.2 • Published 7 months ago

custom-checkbox-radio-scss v2.1.2

Weekly downloads
16
License
ISC
Repository
github
Last release
7 months ago

Custom Checkbox Radio SCSS

SCSS based custom checkboxes and radios; a CSS-only solution.

View the Demo

Swanky

Install

npm i --save custom-checkbox-radio-scss

Include

Depending on your current directory and frontend stack, you'll want something along the lines of one of:

@import "custom-checkbox-radio-scss";

Add

Note, your labels must proceed the inputs and all have suitable name/id/for attributes.

@use 'custom-checkbox-radio-scss/variables' with (
  $background: #f00 // Override any variables
);
@use 'custom-checkbox-radio-scss' as ccr;
@use 'custom-checkbox-radio-scss' as ccr;
.checkbox {
  @include ccr.checkbox;
}
.radio {
  @include ccr.radio;
}
```

```jsx

import formControlStyles from "../formControl.module.scss";

() => (
    <>
        <fieldset>
            <legend>Checkboxes</legend>
            <p className="{formControlStyles.checkbox}">
                <input type="checkbox" name="lorem-1" id="lorem-1" />
                <label htmlFor="lorem-1">Lorem</label>
            </p>
            <p className="{formControlStyles.checkbox}">
                <input type="checkbox" name="lorem-2" id="lorem-2" checked />
                <label htmlFor="lorem-2">Ipsum</label>
            </p>
        </fieldset>

        <fieldset>
            <legend>Radios</legend>
            <p className="{formControlStyles.radio}">
                <input type="radio" name="ipsum" id="ipsum-1" />
                <label htmlFor="ipsum-1">Lorem</label>
            </p>
            <p className="{formControlStyles.radio}">
                <input type="radio" name="ipsum" id="ipsum-2" checked />
                <label htmlFor="ipsum-2">Ipsum</label>
            </p>
        </fieldset>
    </>
);

Customise

Written in a non-invasive kinda way, so you can add your own styles to, say, input[type="radio"] + label::after, or simply override the various variables set in the SCSS file.

Browser Support

IE9 +

2.1.2

7 months ago

2.1.1

9 months ago

2.1.0

9 months ago

2.0.1

9 months ago

2.0.0

9 months ago

1.10.1

11 months ago

1.10.0

11 months ago

1.9.1

1 year ago

1.9.2

1 year ago

1.9.0

5 years ago

1.8.5

5 years ago

1.8.4

5 years ago

1.8.3

5 years ago

1.8.2

6 years ago

1.8.1

6 years ago

1.8.0

6 years ago

1.7.0

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.2

6 years ago

1.5.1

6 years ago

1.5.0

6 years ago

1.4.6

6 years ago

1.4.5

6 years ago

1.4.4

6 years ago

1.4.3

6 years ago

1.4.2

7 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.2

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.0

8 years ago