
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-accessible-form
Advanced tools
React Accessible Form handles makes layout and accessibility easy when writing forms.
React Accessible Form handles makes layout and accessibility easy when writing forms.
Before
<div className="form-group form-group--aligned">
<div className="form-group-section">
<label for="email_field" className="form-label--required">
Email Addresses
</label>
</div>
<div className="form-group-section">
<input type="email" class="form-control" id="email_field" required />
<span className="form-text">Separated by semicolon (;)</span>
</div>
</div>
After
<Form.Group layout="aligned" required>
<Form.Label>Email Addresses</Form.Label>
<Form.Control type="email" />
<Form.Text>Separated by semicolon (;)</Form.Text>
</Form.Group>
id
for the label’s htmlFor
and input’s id
props and links themclassNames
in a predictable way that reduces boilerplate and provides maximum flexibilityrender
prop on Form.Control
Form
Propslayout?: "stacked" | "aligned"
Propagates down to all of the children Form.Group
components. stacked
is the default, which is to set all of the children to display: block
. aligned
splits all of Form.Group
’s children into two groups: "label", and "rest" so that all of the form’s labels will align to the same width.
Form.Group
Propsrequired?: boolean
Set classNames on the label to indicate a required field, and set the required
prop on the Form.Control
disabled?: boolean
Set classNames on the label to indicate a disabled field, and set the disabled
prop on the Form.Control
The default behavior of Form.Control
is to configure an input
element and render it. If you want to use something else, like a select
, textarea
, or a third-party library component, you can render your own component without losing the benefits of React Accessible Form:
{
/* If the controls map to standard HTML attribute names, you can spread the props directly */
}
<Form.Control render={props => <textarea {...props} />} />;
{
/* Otherwise, you can destructure the props and apply however is necessary */
}
<Form.Control
render={({ className, disabled, id, required }) => (
<SomeCustomInputComponent
className={className}
isDisabled={disabled}
htmlId={id}
isRequired={required}
/>
)}
/>;
FAQs
React Accessible Form handles makes layout and accessibility easy when writing forms.
The npm package react-accessible-form receives a total of 125 weekly downloads. As such, react-accessible-form popularity was classified as not popular.
We found that react-accessible-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.