npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bianic-ui/form-control

v0.1.0-alpha.2

Published

React component to provide validation states to form fields

Downloads

3

Readme

@bianic-ui/form-control

Form Control component is used to manange form controls such input fields, checkbox and radio buttons. It provides components and context that make your form fields accessible by default.

  • FormControl - the top level component that provides context
  • FormLabel - the visible form control label
  • FormHelperText - the from control's assistive text that guides the user. If added, it hides when there's an error in the field.
  • FormErrorMessage - the form control's error feedback. If there's a help text visible when the control is invalid, it replaces the help text, to prevent content shift
  • FormErrorIcon - an icon that indicates the error state for colorbind users.

Installation

yarn add @bianic-ui/form-control

# or

npm install @bianic-ui/form-control

Import component

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  FormErrorIcon,
} from "@bianic-ui/form-control"

Basic Usage

The FormControl component automatically provides the id for the input component to be fully accessible.

With Input

<FormControl>
  // automatically gets `htmlFor`
  <FormLabel>First name:</FormLabel>
  // automatically gets `id` and `aria-*` properties
  <Input placeholder="Enter your first name..." />
  // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`
  <FormHelpText>Keep your first name short</FormHelpText>
  // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
  <FormErrorMessage>First name is invalid</FormErrorMessage>
</FormControl>

With Checkbox group

<FormControl as="fieldset">
  <FormLabel as="legend">Who is better:</FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

Focus, Invalid and Disabled States

  • When the Input component receives focus, it notifies the FormControl and adds data-focus on the FormLabel. Simply pass _focus to the FormLabel to style this state.

  • If isInvalid is passed to the FormControl, it notifies the Input and adds data-invalid to the FormLabel so you can change the styles of the label

  • If isDisabled is passed to the FormControl, it makes the Input disabled, and adds data-disabled to the FormLabel so you can change the styles of the label

Changing the requried indicator

To change the required indicator beside the FormLabel, simply pass the indicator prop and set it to your custom indicator components.

<FormControl as="fieldset">
  <FormLabel as="legend" indicator={CustomIndicator}>
    Who is better:
  </FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

Adding a Visual Icon

<FormControl
  label="Tell us about yourself:"
  helpText="Keep it short and sweet!"
  errorText="C'mon! You must select one"
>
  <InputGroup>
    <Input paddingRight="32px" />
    <InputRightElement>
      <FormErrorIcon />
    </InputRightElement>
  </InputGroup>
</FormControl>