Skip to main content

Shapes & Size

Shapes and size adjustments might be the most widely used PCR features ๐Ÿค”

Shapes#

Shapes allow for control over the overall appearance of the control and can be configured vi the shape prop.

Checkbox & Radio#

Checkbox and Radio share the same shapes and there are two to choose from:

  1. curve
  2. round
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Switch#

Switch offers three shapes that are unique to this control:

  1. outline (default)
  2. fill
  3. slim
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Variants#

info

Applicable to Checkbox and Radio only.

Previously known as "fill modes", variants are similar to shape. The variant prop allows us to modify the inner appearance without making the control look like something else. There are two variants to choose from:

  1. fill
  2. thick
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Size#

Out of the box, PCR offers a bigger prop to make all input controls just a tad bit larger:

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Need more control? Use the font-size CSS property!

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^