States
In addition to the color prop, PCR components share many states in common, too.
Disabled#
Disabled state is pretty universal and is supported by all components using the disabled prop. Nothing fancy here, we let the browser handle preventing user action when a component is disabled with no extra magic needed ๐งโโ๏ธ.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Locked#
In addition to disabled states, there's also this thing called locked state. Functionally speaking they are the same; however visually they are different. Disabling an input field changes the visual appearance, whereas locked does not. For the curious reader, under the hood PCR blocks user interaction using some CSS magic with pointer-events: none.
caution
While this might seem enticing, there are accessibility concerns with using this prop. (See WCAG 2 for more info).
SyntaxError: Unexpected token (1:8)
1 : return ()
^Focus#
Add a bit of class to any control via hasFocus ๐ฅ:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Other Pretty Checkbox States#
Extra states such as hover and toggle are not implemented in PCR since they can be done easily using React. If you're new to React this might seem pretty esoteric, but fret not because it's super easy!
Hover#
Pretty Checkbox hover state uses CSS to handle visibility of elements. In the world of React the trick here is make our component stateful and use event handlers to update the state:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Toggle#
Like hover, pretty checkbox toggle can be achieved in PCR by making our component stateful. Replicating this logic requires a bit more overhead than hovering so buckle up ๐!
- Force the control (checkbox, radio, or switch) to be
checked - Change color and label when state changes
Using built-in PCR hooks make this process a whole lot easier ๐
SyntaxError: Unexpected token (1:8)
1 : return ()
^Toggle without Hooks#
Not on the hooks train ๐? No worries:
SyntaxError: Unexpected token (1:8)
1 : return ()
^