![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
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.
@chakra-ui/form-control
Advanced tools
Readme
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.
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`
<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>
<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
React component to provide validation states to form fields
The npm package @chakra-ui/form-control receives a total of 452,011 weekly downloads. As such, @chakra-ui/form-control popularity was classified as popular.
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.
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.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.