The id for the File Upload and the existing input you are choosing to wrap with our Kit with must match each other. This will ensure that the click on the button a.k.a, the underlying label's for, triggers the File Upload.
For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See here for more information on the truncate global prop.
NOTE: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique id is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
For Form Pills with longer text, the wrapped prop can be used to wrap the label within each Form Pill.
Note: Avoid using the wrapped and small props together, as their styles conflict and may cause functionality issues.
By default textTransform = "none". If there is a need to enforce lowercase, please pass the textTransform = "lowercase prop.
The Status, Data, and Product colors highlighted above can be passed to the color prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the color prop.
Validation displays an error with red border and red text below indicating that the user must fill out the field.
Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
The required_indicator prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both label: true for auto-generated labels and label: "Custom Text" for custom labels.
While it's typically used alongside the required prop for HTML5 validation, you can use required_indicator independently if you're handling validation differently (e.g., client-side or backend validation).
Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.
