mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add required prop to RadioButton. (#1035)

Browse source 
Fixes #1034.
This commit is contained in:
brunnerh 2022-01-22 18:05:41 +01:00 • committed by GitHub
commit 25ce57fd5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

23
COMPONENT_INDEX.md
View file

@ -3000,17 +3000,18 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the radio button | | checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the radio button |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio button | | value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | et to `true` to disable the radio button | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio button |
| labelPosition | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position | | required | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelPosition | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the checkbox input | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the radio button input |
### Slots ### Slots

15
docs/src/COMPONENT_API.json
View file

@ -8581,7 +8581,18 @@
{ {
"name": "disabled", "name": "disabled",
"kind": "let", "kind": "let",
"description": "et to `true` to disable the radio button", "description": "Set to `true` to disable the radio button",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -8636,7 +8647,7 @@
{ {
"name": "name", "name": "name",
"kind": "let", "kind": "let",
"description": "Specify a name attribute for the checkbox input", "description": "Specify a name attribute for the radio button input",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,

8
src/RadioButton/RadioButton.svelte
View file

@ -5,9 +5,12 @@
/** Set to `true` to check the radio button */ /** Set to `true` to check the radio button */
export let checked = false; export let checked = false;
/** et to `true` to disable the radio button */ /** Set to `true` to disable the radio button */
export let disabled = false; export let disabled = false;
/** Set to `true` to mark the field as required */
export let required = false;
/** /**
* Specify the label position * Specify the label position
* @type {"right" | "left"} * @type {"right" | "left"}
@ -23,7 +26,7 @@
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the checkbox input */ /** Specify a name attribute for the radio button input */
export let name = ""; export let name = "";
/** Obtain a reference to the input HTML element */ /** Obtain a reference to the input HTML element */
@ -56,6 +59,7 @@
name="{name}" name="{name}"
checked="{checked}" checked="{checked}"
disabled="{disabled}" disabled="{disabled}"
required="{required}"
value="{value}" value="{value}"
class:bx--radio-button="{true}" class:bx--radio-button="{true}"
on:change on:change

10
types/RadioButton/RadioButton.svelte.d.ts vendored
View file

@ -16,11 +16,17 @@ export interface RadioButtonProps
checked?: boolean; checked?: boolean;
/** /**
* et to `true` to disable the radio button * Set to `true` to disable the radio button
* @default false * @default false
*/ */
disabled?: boolean; disabled?: boolean;
/**
* Set to `true` to mark the field as required
* @default false
*/
required?: boolean;
/** /**
* Specify the label position * Specify the label position
* @default "right" * @default "right"
@ -46,7 +52,7 @@ export interface RadioButtonProps
id?: string; id?: string;
/** /**
* Specify a name attribute for the checkbox input * Specify a name attribute for the radio button input
* @default "" * @default ""
*/ */
name?: string; name?: string;