How to use @instructure/ui-form-field - 10 common examples

PropTypes.number
    ])),
    /**
    * when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    /** works just like disabled but keeps the same styles as if it were active */
    readOnly: PropTypes.bool,
    /**
    * object with shape: `{
    * text: PropTypes.string,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * any children (ones that aren't `RadioInput` are passed through)
    */
    children: PropTypes.node,
    variant: PropTypes.oneOf(['simple', 'toggle']), // TODO: split toggle out to its own component
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf([
      'stacked',
      'columns',
      'inline'
    ])
  }

  static defaultProps = {
    disabled: false,
    variant: 'simple',

*/
    label: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
    /**
    * the mime media type/s or file extension/s allowed to be dropped inside
    */
    accept: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string)
    ]),
    /**
    * object with shape: `{
    * text: PropTypes.string,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * callback called when clicking on drop area to select files to upload
    */
    onClick: PropTypes.func,
    /**
    * callback called when dropping files or when the file dialog window exits successfully
    */
    onDrop: PropTypes.func,
    /**
    * callback called when dropping allowed files
    */
    onDropAccepted: PropTypes.func,
    /**
    * callback called when dropping rejected files
    */
    onDropRejected: PropTypes.func,

*/
    renderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
    /**
    * The mime media type/s or file extension/s allowed to be dropped inside
    */
    accept: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string)
    ]),
    /**
    * object with shape: `{
    * text: PropTypes.string,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * Called when clicking on drop area to select files to upload
    */
    onClick: PropTypes.func,
    /**
    * Called when dropping files or when file dialog window exits successfully
    */
    onDrop: PropTypes.func,
    /**
    * Called when dropping allowed files
    */
    onDropAccepted: PropTypes.func,
    /**
    * Called when dropping rejected files
    */
    onDropRejected: PropTypes.func,

*/
    allowEmpty: PropTypes.bool,
    /**
     * SelectSingle only (Mutually exclusive with multiple=true)
     * If true, the user can freely enter a value not available in the options list.
     * Implies editable is true.
     */
    allowCustom: PropTypes.bool,

    id: PropTypes.string,

    /**
     * The placement of the content in relation to the trigger, passed down to Position
     */
    placement: LayoutPropTypes.placement,
    messages: PropTypes.arrayOf(FormPropTypes.message),
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf(['stacked', 'inline']),
    /**
     * Options dropdown can be wider than input if optionsMaxWidth is provided
     */
    optionsMaxWidth: PropTypes.string,
    /**
     * Give the Spinner a title to be read by screenreaders. Disables menu
     * interaction and renders a Spinner in its place.
     */
    loadingText: PropTypes.string,
    /**
     * The menu content to render when no options are present or are filtered away
     */
    emptyOption: PropTypes.node,
    /**

static propTypes = {
    min: PropTypes.number.isRequired,
    max: PropTypes.number.isRequired,
    /**
    * value to set on initial render
    */
    defaultValue: PropTypes.number,
    /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
    value: controllable(PropTypes.number),
    /**
    * when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func,
    messages: PropTypes.arrayOf(FormPropTypes.message),
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf(['stacked', 'inline']),
    id: PropTypes.string,
    label: PropTypes.node.isRequired,
    /**
    * whether to display the current value
    */
    displayValue: PropTypes.bool,
    step: PropTypes.number,
    /**
    * A function to format the displayed value
    */
    formatValue: PropTypes.func,
    inline: PropTypes.bool,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool

*/
    defaultValue: PropTypes.string,
    /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    * When "disabled", the input changes visibly to indicate that it cannot
    * receive user interactions. When "readonly" the input still cannot receive
    * user interactions but it keeps the same styles as if it were enabled.
    */
    interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
    /**
    * object with shape: `{
    * text: PropTypes.string,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * The size of the text input.
    */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * The text alignment of the input.
    */
    textAlign: PropTypes.oneOf(['start', 'center']),
    /**
    * The width of the input.
    */
    width: PropTypes.string,
    /**
    * The display of the root element.
    */
    display: PropTypes.oneOf(['inline-block', 'block']),

* Specifies the width of the input.
    */
    width: PropTypes.string,
    /**
    * Provides a ref to the underlying input element.
    */
    inputRef: PropTypes.func,
    /**
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
    *   text: PropTypes.string,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * The placement of the calendar in relation to the input.
    */
    placement: PositionPropTypes.placement,
    /**
    * Controls whether or not the calendar is showing.
    */
    isShowingCalendar: PropTypes.bool,
    /**
    * Callback fired when the input is blurred. Feedback should be provided
    * to the user when this function is called if the selected date or input
    * value is not valid.
    */
    onRequestValidateDate: PropTypes.func,
    /**
    * Callback fired requesting the calendar be shown.

*/
    id: PropTypes.string,
    /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    * When "disabled", the input changes visibly to indicate that it cannot
    * receive user interactions. When "readonly" the input still cannot receive
    * user interactions but it keeps the same styles as if it were enabled.
    */
    interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
    /**
     * Object with shape: `{
     *   text: PropTypes.string,
     *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
     * }`
     */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
     * Html placeholder text to display when the input has no value. This
     * should be hint text, not a label replacement.
     */
    placeholder: PropTypes.string,
    /**
    * Whether or not the text input is required.
    */
    isRequired: PropTypes.bool,
    /**
     * Whether or not to display the up/down arrow buttons.
     */
    showArrows: PropTypes.bool,
    /**
    * The size of the input.
    */

*
    * Either parameter is undefined if the user has not entered anything,
    * which you can use to test for no input if the `DateTimeInput` is required.
    **/
    invalidDateTimeMessage: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.func
    ]).isRequired,
    /**
    * Messages my parent would like displayed
    * object with shape: `{
    *   text: PropTypes.string,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *  }
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * This format of the composite date-time when displayed in messages.
    * Valid formats are compatible with
    * [moment.js formats](https://momentjs.com/docs/#/displaying/format/),
    * including localized formats.
    **/
    messageFormat: PropTypes.string,
    /**
    * Vertically stacked, horizontally arranged in 2 columns, or inline.
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
    layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
    /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
    **/

* the selected values (must be accompanied by an `onChange` prop)
    */
    value: controllable(PropTypes.array),
    /**
    * when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool,
    /**
    * object with shape: `{
    text: PropTypes.string,
    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * children of type `Checkbox`
    */
    children: ChildrenPropTypes.oneOf([Checkbox]),
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf([
      'stacked',
      'columns',
      'inline'
    ])
  }

  static defaultProps = {
    disabled: false,
    readOnly: false,
    size: 'medium',