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

<> <Checkbox shape="round">I'm a checkbox</Checkbox> <Radio shape="curve">Radio time</Radio> </>

<>
    <Checkbox shape="round">I'm a checkbox</Checkbox>
    <Radio shape="curve">Radio time</Radio>
</>

Result

I'm a checkbox

Radio time

Switch

Switch offers three shapes that are unique to this control:

1. outline (default)
2. fill
3. slim

Live Editor

<> <Switch>Outline</Switch> <Switch shape="fill" color="primary"> Fill </Switch> <Switch shape="slim" color="success"> Slim </Switch> </>

<>
    <Switch>Outline</Switch>
    <Switch shape="fill" color="primary">
        Fill
    </Switch>
    <Switch shape="slim" color="success">
        Slim
    </Switch>
</>

Result

Outline

Fill

Slim

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

<> <Checkbox variant="fill">Fill</Checkbox> <Radio variant="thick">Thick</Radio> <Checkbox shape="curve" variant="thick"> Curved Thick </Checkbox> </>

<>
    <Checkbox variant="fill">Fill</Checkbox>
    <Radio variant="thick">Thick</Radio>
    <Checkbox shape="curve" variant="thick">
        Curved Thick
    </Checkbox>
</>

Result

Fill

Thick

Curved Thick

Size

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

Live Editor

<> <Checkbox>Regular</Checkbox> <Checkbox bigger>Bigger</Checkbox> </>

<>
    <Checkbox>Regular</Checkbox>
    <Checkbox bigger>Bigger</Checkbox>
</>

Result

Regular

Bigger

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

Live Editor

function App() { const scale = useScaleState(); return ( <> <Scale {...scale} />{' '} <Checkbox style={{ fontSize: scale.size }}>Regular</Checkbox> <p> Current <code>font-size: {scale.size}px</code> </p> </> ); }

function App() {
    const scale = useScaleState();

    return (
        <>
            <Scale {...scale} />{' '}
            <Checkbox style={{ fontSize: scale.size }}>Regular</Checkbox>
            <p>
                Current <code>font-size: {scale.size}px</code>
            </p>
        </>
    );
}

Result

Regular

Current font-size: 14px