React UrlField API
API reference for the React UrlField component from Modj.js. Learn about how to use the UrlField component and all the valid props that can be supplied to this component.
Import
UrlField Props
The following props are specific to the UrlField component and can be applied to this component.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "filled" "outlined" "transparent" | "filled" | Applies different styles based on variant. |
| notched | boolean | false | If true, the component will have notched effect. |
| minLength | number | 3 | The minimum length of the field. |
| maxLength | number | 2048 | The maximum length of the field. |
| autoComplete | string | "off" | Controls whether the field can be auto completed by the browser. |
| placeholder | string | "Your Website" *" | Placeholder for the component. |
| type | string | "text" | Type of the component. |
| name | string | "website" | Name of the component. |
| id | string | "website" | Id of the component. |
System Props
The component mentioned in this page is wrapped with a withModSystemProps HOC and therefore, the following props can be applied to this component. Note that some of these props may have no effect on this component.
| Name | Type | Default | Description |
|---|---|---|---|
| alignItems | string | - | Controls the alignment of items. |
| bgColor | "primary" "secondary" "main" "success" "error" "light" "dark" "transparent" | - | Applies background color to the component based on the colors defined in the theme. |
| bottom | number | - | Applies bottom spacing to the component. |
| border | "primary" "success" "error" "light" "dark" "none" | - | Applies border to the component based on the borders defined in the theme. |
| borderTop | "primary" "success" "error" "light" "dark" "none" | - | Applies top border to the component based on the borders defined in the theme. |
| borderRight | "primary" "success" "error" "light" "dark" "none" | - | Applies right border to the component based on the borders defined in the theme. |
| borderBottom | "primary" "success" "error" "light" "dark" "none" | - | Applies bottom border to the component based on the borders defined in the theme. |
| borderLeft | "primary" "success" "error" "light" "dark" "none" | - | Applies left border to the component based on the borders defined in the theme. |
| borderX | "primary" "success" "error" "light" "dark" "none" | - | Applies left and right border to the component based on the borders defined in the theme. |
| borderY | "primary" "success" "error" "light" "dark" "none" | - | Applies top and bottom border to the component based on the borders defined in the theme. |
| borderRadius | number | - | Applies border radius to the component. |
| color | "primary" "secondary" "main" "success" "error" "light" "dark" "white" | - | Applies color to the text inside this component based on the colors defined in the theme. |
| display | string | - | Controls how the component should be displayed. |
| elevation | "light" "normal" "heavy" "none" | - | Applies shadow to the component based on the elevation defined in the theme. |
| flexWrap | string | - | Controls whether the flex items are forced onto one line or can wrap onto multiple lines. |
| float | string | - | Controls whether the items are placed to the right or left of its container. |
| fs | number | - | Applies font-size in rem unit to the text inside of this component. |
| fw | number | - | Applies font-weight to the text inside of this component. |
| gap | number | - | Applies gaps/gutters between rows and columns. |
| height | string | - | Applies height to the component. |
| justifyContent | string | - | Applies justify-content CSS property to the component. |
| left | number | - | Applies left spacing to the component. |
| m | number | - | Applies margin in px to the component. |
| mt | number | - | Applies top margin in px to the component. |
| mr | number | - | Applies right margin in px to the component. |
| mb | number | - | Applies bottom margin in px to the component. |
| ml | number | - | Applies left margin in px to the component. |
| mx | number | - | Applies right and left margin in px to the component. |
| my | number | - | Applies top and bottom margin in px to the component. |
| p | number | - | Applies padding in px to the component. |
| pt | number | - | Applies top padding in px to the component. |
| pr | number | - | Applies right padding in px to the component. |
| pb | number | - | Applies bottom padding in px to the component. |
| pl | number | - | Applies left padding in px to the component. |
| px | number | - | Applies right and left padding in px to the component. |
| py | number | - | Applies top and bottom padding in px to the component. |
| position | string | - | Controls the position of the component. |
| right | number | - | Applies right spacing to the component. |
| textTransform | string | - | Applies text-transform CSS property to the text inside this component. |
| textAlign | string | - | Applies text-align CSS property to the text inside this component. |
| top | number | - | Applies top spacing to the component. |
| width | string | - | Applies width to the component. |