Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@chakra-ui/input
Advanced tools
Input component is a component that is used to get user input in a text field.
yarn add @chakra-ui/input
# or
npm i @chakra-ui/input
import {
Input,
InputGroup,
InputAddon,
InputLeftAddon,
InputRightAddon,
InputElement,
InputLeftElement,
InputRightElement,
} from "@chakra-ui/input"
<Input placeholder="A simple input component" />
Pass the isDisabled
prop to have the input in the disabled state.
<Input isDisabled placeholder="A disabled input" />
Pass the isInvalid
prop to have the input in the invalid state.
<Input isInvalid placeholder="An invalid input" />
Pass the isReadOnly
prop to have the input in the read-only state.
<Input isReadOnly placeholder="An invalid input" />
Pass the size
prop to change the size of the input. Chakra UI input size
values are: sm
, md
and lg
. The size of the input component is md
by
default.
<>
<Input size="sm" marginBottom="1rem" placeholder="A simple placeholder" />
<Input size="md" marginBottom="1rem" placeholder="A simple placeholder" />
<Input size="lg" placeholder="A simple placeholder" />
</>
Pass the variant
prop to change the visual appearance of the input component.
Chakra UI input variant types are: outline
, filled
, flushed
and
unstyled
.
<>
<Input variant="outline" placeholder="Outline" marginBottom="1rem" />
<Input variant="filled" placeholder="Filled" marginBottom="1rem" />
<Input variant="flushed" placeholder="Flushed" marginBottom="1rem" />
<Input variant="unstyled" placeholder="Unstyled" />
</>
Prepend or append an element, generally a label or a button to the input component.
<>
<InputGroup>
<InputLeftAddon children="+234" />
<Input borderLeftRadius="0" placeholder="Phone number..." />
</InputGroup>
<br />
<InputGroup size="sm">
<InputLeftAddon children="https://" />
<Input borderRadius="0" placeholder="website.com" />
<InputRightAddon children=".com" />
</InputGroup>
</>
<InputGroup>
<InputLeftElement children={"P"} />
<Input type="tel" placeholder="Phone number" />
</InputGroup>
FAQs
A React component for input text field
The npm package @chakra-ui/input receives a total of 501,742 weekly downloads. As such, @chakra-ui/input popularity was classified as popular.
We found that @chakra-ui/input 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.