Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@chakra-ui/form-control
Advanced tools
Package description
@chakra-ui/form-control is a package from the Chakra UI library that provides a set of components and hooks to build accessible and customizable form controls in React applications. It helps in managing form state, validation, and accessibility with ease.
FormControl
The FormControl component is used to group form elements and manage their state and validation. It provides a way to display error messages and ensure accessibility.
import { FormControl, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';
function Example() {
const [input, setInput] = React.useState('');
const isError = input === '';
return (
<FormControl isInvalid={isError}>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id='email' type='email' value={input} onChange={(e) => setInput(e.target.value)} />
{isError && <FormErrorMessage>Email is required.</FormErrorMessage>}
</FormControl>
);
}
FormLabel
The FormLabel component is used to label form inputs. It ensures that the label is properly associated with the input for accessibility purposes.
import { FormLabel } from '@chakra-ui/react';
function Example() {
return (
<FormLabel htmlFor='name'>Name</FormLabel>
);
}
FormErrorMessage
The FormErrorMessage component is used to display error messages when form validation fails. It is typically used within a FormControl component.
import { FormControl, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';
function Example() {
const [input, setInput] = React.useState('');
const isError = input === '';
return (
<FormControl isInvalid={isError}>
<FormLabel htmlFor='email'>Email</FormLabel>
<Input id='email' type='email' value={input} onChange={(e) => setInput(e.target.value)} />
{isError && <FormErrorMessage>Email is required.</FormErrorMessage>}
</FormControl>
);
}
Formik is a popular form library for React that provides a comprehensive set of tools for managing form state, validation, and submission. It offers more advanced features compared to @chakra-ui/form-control, such as field-level validation and nested forms.
React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, making it lightweight and easy to integrate. It offers better performance and less boilerplate compared to @chakra-ui/form-control.
Redux Form is a library that integrates form state management with Redux. It is suitable for applications that already use Redux for state management. It provides more control over form state but can be more complex to set up compared to @chakra-ui/form-control.
Readme
Form Control component is used to manage form controls such input fields, checkbox and radio buttons. It provides components and context that make your form fields accessible by default.
yarn add @chakra-ui/form-control
# or
npm install @chakra-ui/form-control
import {
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
FormErrorIcon,
} from "@chakra-ui/form-control"
The FormControl
component automatically provides the id
for the input
component to be fully accessible.
<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`
<FormHelperText>Keep your first name short</FormHelperText>
// automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
<FormErrorMessage>First name is invalid</FormErrorMessage>
</FormControl>
<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>
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.
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>
<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>
FAQs
Unknown package
We found that @chakra-ui/form-control demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.