Sets the value of the `name` attribute on the form controlĪrray of items to render in the component When set, allows multiple options to be selected (multi-select) The key to use from the option object to get the label Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed Sets the `form` attribute on the controlįield name in the `options` array that should be used for the html label instead of text field ID of the form that the form control belongs to. When set to `true`, disables the component's functionality and places it in a disabled stateįield name in the `options` array that should be used for the disabled state Does not set the `autofocus` attribute on the control When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. If not set, the 'state' prop will dictate the value Optional value to set for the 'aria-invalid' attribute. form-control will always be placed on the select).Ī plain select will always be rendered for non multiple selects which have the select-size prop set to a value greater than 1. Set the prop plain to have a native browser rendered (although the class. When state is set to false, aria-invalid will also be set to true. state = false) you may also want to set the prop aria-invalid to true. When has an invalid contextual state (i.e. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute (see below). For instance, you could include a hint about state in the form control's text itself, or by providing an additional help text block (via or ). Using these contextual states to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.Įnsure that an alternative indication of state is also provided. Conveying contextual validation state to assistive technologies and colorblind users To apply one of the contextual state icons on, set the state prop to false (for invalid), true (for valid), or null (no validation state). null Displays no validation state (neither valid nor invalid).true (denotes valid state) is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.A user must fill in this field properly to submit the form. false (denotes invalid state) is great for when there's a blocking or required field.Generally speaking, you'll want to use a particular state for specific types of feedback: Contextual statesīootstrap includes validation styles for valid and invalid states on most form controls. Note that this prop does not set the autofocus attribute on the select, nor can it tell when the select becomes visible. mounted) into the document or re-activated when inside a Vue component. When the autofocus prop is set on, the select will be auto-focused when it is inserted (i.e. To control the select width, place the input inside standard Bootstrap grid column. Select multiple components logicworks full#Set the form-control text size using the size prop to sm or lg for small or large respectively.īy default will occupy the full width of the container that it appears in. Please select an option Option A Option B (disabled) Option with object value Another option with object value Selected: ,
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |