UNPKG

@umbraco-ui/uui-radio

Version:

Radio input, Umbraco backoffice style. Package contains two custom elements, <uui-radio> and <uui-radio-group>. You must wrap radio elements in the group, to make the input work. Can participate in native form element.

260 lines 8.53 kB
{ "version": "experimental", "tags": [ { "name": "uui-radio-group", "path": "./lib/uui-radio-group.element.ts", "attributes": [ { "name": "disabled", "description": "Disables the input.", "type": "boolean", "default": "\"false\"" }, { "name": "readonly", "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.", "type": "boolean", "default": "\"false\"" }, { "name": "name", "description": "This is a name property of the component.", "type": "string", "default": "\"''\"" }, { "name": "value", "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.", "type": "string", "default": "\"''\"" }, { "name": "required", "description": "Apply validation rule for requiring a value of this form control.", "type": "boolean", "default": "\"false\"" }, { "name": "required-message", "description": "Required validation message.", "type": "string", "default": "\"This field is required\"" }, { "name": "error", "description": "Apply custom error on this input.", "type": "boolean", "default": "false" }, { "name": "error-message", "description": "Custom error message.", "type": "string", "default": "\"This field is invalid\"" }, { "name": "pristine", "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.", "type": "boolean", "default": "\"true\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "Disables the input.", "type": "boolean", "default": "\"false\"" }, { "name": "readonly", "attribute": "readonly", "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.", "type": "boolean", "default": "\"false\"" }, { "name": "styles", "type": "CSSResult[]", "default": "[null]" }, { "name": "formAssociated", "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/", "type": "boolean", "default": "true" }, { "name": "name", "attribute": "name", "description": "This is a name property of the component.", "type": "string", "default": "\"''\"" }, { "name": "value", "attribute": "value", "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.", "type": "string", "default": "\"''\"" }, { "name": "required", "attribute": "required", "description": "Apply validation rule for requiring a value of this form control.", "type": "boolean", "default": "\"false\"" }, { "name": "requiredMessage", "attribute": "required-message", "description": "Required validation message.", "type": "string", "default": "\"This field is required\"" }, { "name": "error", "attribute": "error", "description": "Apply custom error on this input.", "type": "boolean", "default": "false" }, { "name": "errorMessage", "attribute": "error-message", "description": "Custom error message.", "type": "string", "default": "\"This field is invalid\"" }, { "name": "validity", "type": "ValidityState" }, { "name": "validationMessage", "type": "string" }, { "name": "pristine", "attribute": "pristine", "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.", "type": "boolean", "default": "\"true\"" } ], "slots": [ { "name": "", "description": "slot for `<uui-radio>` elements or custom elements that extend from `UUIRadioElement`" } ] }, { "name": "uui-radio", "path": "./lib/uui-radio.element.ts", "attributes": [ { "name": "name", "description": "This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.", "type": "string", "default": "\"''\"" }, { "name": "value", "description": "This is a value property of the `<uui-radio>`.", "type": "string", "default": "\"''\"" }, { "name": "label", "type": "string", "default": "\"\"" }, { "name": "checked", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the input.", "type": "boolean", "default": "\"false\"" }, { "name": "readonly", "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.", "type": "boolean", "default": "\"false\"" } ], "properties": [ { "name": "name", "attribute": "name", "description": "This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.", "type": "string", "default": "\"''\"" }, { "name": "value", "attribute": "value", "description": "This is a value property of the `<uui-radio>`.", "type": "string", "default": "\"''\"" }, { "name": "label", "attribute": "label", "type": "string", "default": "\"\"" }, { "name": "checked", "attribute": "checked", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input.", "type": "boolean", "default": "\"false\"" }, { "name": "readonly", "attribute": "readonly", "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.", "type": "boolean", "default": "\"false\"" }, { "name": "styles", "type": "CSSResult[]", "default": "[\"UUIHorizontalShakeKeyframes\",null]" } ], "events": [ { "name": "change", "description": "on input change" } ], "slots": [ { "name": "", "description": "slot to set the label if no `label` attribute is set." } ], "cssProperties": [ { "name": "--uui-radio-button-size", "description": "Sets the size of the radio button." } ] } ] }