1c45b93a85
Based on the QA feedbacks we figured out that form fields were not all using the exact same greyscale colors.
170 lines
4.4 KiB
Plaintext
170 lines
4.4 KiB
Plaintext
import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
|
|
import { Input } from "./index";
|
|
import * as Stories from './index.stories';
|
|
|
|
<Meta of={Stories}/>
|
|
|
|
# Input
|
|
|
|
Cunningham provides a versatile Input component that you can use in your forms.
|
|
|
|
<Canvas>
|
|
<Story id="components-forms-input--default"/>
|
|
</Canvas>
|
|
|
|
<Source
|
|
language='ts'
|
|
dark
|
|
format={false}
|
|
code={`import { Input } from "@openfun/cunningham-react";`}
|
|
/>
|
|
|
|
## States
|
|
|
|
You can use the following props to change the state of the Input component by using the `state` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--default"/>
|
|
</Canvas>
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--success"/>
|
|
</Canvas>
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--error"/>
|
|
</Canvas>
|
|
|
|
## Disabled
|
|
|
|
As a regular input, you can disable it by using the `disabled` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--disabled-empty"/>
|
|
<Story id="components-forms-input--disabled-filled"/>
|
|
</Canvas>
|
|
|
|
## Icons
|
|
|
|
You can define an icon that will appear on the left side of the input by using the `icon` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--icon"/>
|
|
</Canvas>
|
|
|
|
You can also independently add an icon on the right side by using the `rightIcon` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--icon-right"/>
|
|
</Canvas>
|
|
|
|
## Texts
|
|
|
|
You can define a text that will appear below the input by using the `text` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--with-text"/>
|
|
</Canvas>
|
|
|
|
You can also independently add a text on the right side by using the `rightText` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--with-both-texts"/>
|
|
</Canvas>
|
|
|
|
## Width
|
|
|
|
By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--full-width"/>
|
|
</Canvas>
|
|
|
|
## Chars Counter
|
|
|
|
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
|
|
in mind to also define `charCounterMax`.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--char-counter"/>
|
|
</Canvas>
|
|
|
|
## Controlled / Non Controlled
|
|
|
|
Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
|
|
using the component in a controlled way.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--controlled"/>
|
|
</Canvas>
|
|
|
|
## Ref
|
|
|
|
You can use the `ref` props to get a reference to the input element.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--with-ref"/>
|
|
</Canvas>
|
|
|
|
## Usage with react-hook-form
|
|
|
|
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-input--react-hook-form"/>
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
You can use all the props of the native html `<input>` element props plus the following.
|
|
|
|
<ArgTypes of={Input} />
|
|
|
|
## Design tokens
|
|
|
|
Here are the custom design tokens defined by the button.
|
|
|
|
| Token | Description |
|
|
|--------------- |----------------------------- |
|
|
| font-weight | Value font weight |
|
|
| font-size | Value font size |
|
|
| value-color | Value color |
|
|
| value-color--disabled | Value color when disabled |
|
|
| border-radius | Border radius of the input |
|
|
| border-radius--hover | Border radius of the input on mouse hover |
|
|
| border-radius--focus | Border radius of the input when focused |
|
|
| border-width | Border width of the input |
|
|
| border-color | Border color of the input |
|
|
| border-color--hover | Border color of the input on mouse hover |
|
|
| border-color--focus | Border color of the input when focus |
|
|
| border-style | Border style of the input |
|
|
| label-color--focus | Label color when focused |
|
|
|
|
See also [Field](?path=/story/components-forms-field-doc--page)
|
|
|
|
## Form Example
|
|
|
|
<Canvas>
|
|
<Story id="components-forms-input--form-example"/>
|
|
</Canvas>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Input/resources/dd_1.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Input/resources/dd_2.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Input/resources/dd_3.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Input/resources/dd_4.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Input/resources/dd_5.svg"/>
|